I am creating a web page whereby I want content to display at the left side(9 columns) and Ads to display at the right sidebar(3 columns) .At the left side I have nested two rows and want content t0 be displayed inside the rows. But when I test on a live server the Ads dont display properly. I am using Bootstrap 3 to partition the page.
<!--Parent row -->
<div class="row">
<div class='row'>
<div class="col-sm-9">
//Page content.....
</div>
</div>
<div class='row'>
<div class="col-sm-9">
//Page content.....
</div>
</div>
<div class="row">
<div class="col-sm-9">
//...Google Ads display
</div>
</div>
</div> <!--END parent row -->
With Bootstrap, all the columns must add up to 12. I can see that you've got 3 sets of 9 columns which makes 18.
The layout would need to be as so:
<!--Parent row -->
<div class="row">
<div class="col-sm-9">
<div class="col-sm-6"><!-- Nested col 1 (of 50%) --></div>
<div class="col-sm-6"><!-- Nested col 2 (of 50%) --></div>
</div>
<div class="col-sm-3"><!-- ...Google Ads display --></div>
</div> <!--END parent row -->
This will put the Google Ads column to the right, and have two nested columns inside the Page content columns.
The .row class should be used only once per row, not per column.
Related
I currently have:
<div class="row">
<div class="col-xs-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-xs-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
This works fine for desktop. However, on mobile the columns are just too small to hold what is needed. In this case, it would be better to have two rows (instead of two columns in one row), with one column in each row.
How could I do it without duplicating the content? The content has some controls like select that should be unique on the page.
Thank you!
I hope this structure will help you.
<div class="row">
<div class="col-sm-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-sm-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
I have two columns:
<div class="col-md-9">
...main content here
</div>
<div class="col-md-3">
...sidebar content here
</div>
I want the col-md-3 on the right side until the first breakpoint then on top thereafter at smaller viewports. I played around with pushing and pulling columns, but couldn't figure out how to display correctly. Please advise.
This should do it. Demo
The idea is that the top div will always break above. Since we want the top div in the right position we push it to the right by the offset of the other column which is 9. Then we pull the bottom div back 3 columns to put it in the left position.
<div class="col-md-3 col-md-push-9">
...sidebar content here
</div>
<div class="col-md-9 col-md-pull-3">
...main content here
</div>
I've been using Bootstrap for a while (specifically, version 3) and have noticed that I still am unsure whether I should always close columns with a that has a class of .row assigned to it after every 12 columns OR can I wait and apply that closing .row at the end of my code as long as I understand that any columns that add up to more than 12 columns in a single row will simply wrap automatically onto a new line. The benefit of the latter option is that it would be less code and less chances of forgetting to add that closing div tag for each 12 column row.
In other words, is it better to do this?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div>
<div class="col-md-4">
<p>some content here too</p>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/.row-->
OR, is this method more efficient?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div><!--/.col-md-8-->
<div class="col-md-4">
<p>some more content here</p>
</div><!--/.col-md-4-->
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/one .row div to close them all-->
...well, it actually depends on the design - I am using both depending on the circumstance.
The difference lies in the height of the elements. If the two cols in the first row had different heights, closing the row would essentially mean that the two bottom columns would be aligned starting from the same top position.
However if the cols have different heights NOT closing the row can have different results.
edit: ...this is because of the way float works on the cols elements. Closing a row clears the float.
edit2: here is an example of both cases:
not closing row:
<div class="row">
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
</div>
http://jsfiddle.net/b2rkgd5w/1/
closing row:
http://jsfiddle.net/1krj49pm/2/
besides closing the row element the rest of the code is exactly the same.
I have this code:
<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>
What I want for small (sm) screens is to have two divs that have three columns each, and an offset of 6 columns for the first div.
For medium (md) screens, I would like to have two divs with twelve columns each (one horizontally stacked under the other), with no offsets.
Somehow the browser doesn't recognize the class col-md-offset-0. It still uses the col-sm-offset-6 class. Any ideas why?
Which version of bootstrap are you using? The early versions of Bootstrap 3 (3.0, 3.0.1) didn't work with this functionality.
col-md-offset-0 should be working as seen in this bootstrap example found here (http://getbootstrap.com/css/#grid-responsive-resets):
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
There is no col-??-offset-0. All "rows" assume there is no offset unless it has been specified. I think you are wanting 3 rows on a small screen and 1 row on a medium screen.
To get the result I believe you are looking for try this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>
Keep in mind you will only see a difference on a small tablet with what you described. Medium, large, and extra small screens the columns are spanning 12.
Hope this helps.
If I get you right, you want something that seems to be the opposite of what is desired normally: you want a horizontal layout for small screens and vertically stacked elements on large screens. You may achieve this in a way like this:
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>
On small screens, i.e. xs and sm, this generates one row with two columns with an offset of 6. On larger screens, i.e. md and lg, it generates two vertically stacked elements in full width (12 columns).
So this totally works (goes from 4 columns to 2 on small screens):
<div class="row">
<div class="col-lg-3 col-sm-6"> 1</div>
<div class="col-lg-3 col-sm-6"> 2</div>
<div class="col-lg-3 col-sm-6"> 3</div>
<div class="col-lg-3 col-sm-6"> 4</div>
</div>
As does my 3-column, however the middle column gets stacked on top of the third one (which by then is the right/2nd column).
<div class="row" id="footer">
<div class="col-lg-3 col-sm-6">
1
</div>
<div class="col-lg-3 col-sm-6">
2
</div>
<div class="col-lg-6 col-sm-6">
3
</div>
</div>
How can I tell the middle column to stack above or underneath the first column? col-sm-pull-6 doesn't work for example.
Desired result:
1 - 3
2 - ..
The problem with switching 2 and 3 and then using push and pull, is that the 2nd column still goes a top of the 3rd column. And I need them to be like in my desired result 'diagram'.
Edit: What I can do is give the first column col-sm-12. This will push the other 2 down. That way the order is good, and since it's for a footer, the fact that the paragraph column is at the complete bottom, isn't bad either. But I'm still open for better suggestions.
The grid now looks like this:
1
2 - 3
Be sure to watch out for divs that have different heights. Those will cause things to not wrap all the way to the left like you might expect.
You can address this using the bootstrap clearfix (even conditionally) with something like:
<div class="clearfix visible-sm"></div>
Put that after a div where you'd want to start a new row at the -sm size. Repeat as needed.
So here goes,
first of all you should use the designs for smaller screens BEFORE larger screens like so:
<div class="col-sm-6 col-lg-3"> (...)
Now for your design to happen you need to to this:
<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>
...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.
edit: here is a working fiddle:
http://jsfiddle.net/ujrwyrbr/2/