How do I write a bootstrap 12 column layout? This might be simple but it's nice to know the proper way of doing this.
<div class="col-xs-12 col-sm-12 col-md-12"></div>
Depending on your requirements, you'd probably be okay just writing
<div class="col-md-12">
This would render the div at 12 cols across all viewports.
If for example you have a reason to want this div to render at 6 cols wide on small devices but remain at 12 on md you could use
<div class="col-md-12 col-sm-6">
to target the different viewport sizes... but do check out the (extensive) bootstrap documentation for further details
Here's the bootstrap grid "documentation"
to get 12 columns, you would need 12 seperate divs with the .col-[size]-1 class
Some more detailed documentation
Related
I have a page http://spitzpomeranian.com/fr/?option=com_rsform&view=rsform&formId=5
with 2 div:
- one on the left display iframe youtube,
- one on the right display a form
On desktop view it is fine,
but when I reduce my window to see the responsive view, the form on the right doesn't go under my youtube video, but it goes behind!
Any CSS expert could explain me how can I get that done please?
I search solution o google and tried many things without success.
Thanks in advance.
It seems as your page is already using Twitter Bootstrap (I've viewed the source of the page) but you're not taking advantage of Bootstrap's responsive column layout.
You currently have these 2 elements:
<div class="div_image_homepage_left"></div>
<div class="div_image_homepage_right"></div>
I recommend removing the current css properties you already have for them (i.e float, display, position, etc) and using the following:
<div class="row">
<div class="div_image_homepage_left col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="div_image_homepage_right col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
This will make them take 50% on large and medium size (6 columns out of 12 columns) screens and 100% on small and extra small screen sizes (12 out of 12 columns).
Read more about Bootstrap grid system here
Hope this helps.
Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.
1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.
2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.
I tried the Cards Columns and it's almost what I need, except the masonry look. I want them also aligned in rows.
I also tried the Grid Options with col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.
This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.
You can just wrap all .col-*-* with one single <div class="row">...</div>. Your content will wrap when needed.
Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11 and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.
Another example taken from Bootstrap's documentation
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Here .col-4 would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.
Bootstrap 4
I made a fiddle to show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.
This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.
Bootstrap 3
I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.
In Bootstrap 3, you can omit the .row altogether and use .container as the parent to all the .col-*-*.
You can check out this fiddle to see the difference between using .row and not using .row to layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .row to put all your .cols inside.
Compensating for different content height
However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.
Bootstrap 3 provides a class for this, you can just insert <div class="clearfix"> whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-* to achieve that.
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
<div class="clearfix hidden-md hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
<div class="clearfix hidden-sm hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
</div>
Again, I made a fiddle to show the whole thing in action.
I have a problem with bootstrap.. In last project, everything was fine, but now, I really don't know what to do.. I used customize for customizing bootstrap (3), selected only grid system & responsive utilities (the same way as in last project).
Columns: 4
Grid gutter width: 16
Tablet: 720px + grid-gutter
Desktop: 980px + grid-gutter
Large desktop: 1140px + grid-gutter
After a few hours of seraching I decided ask here.
URL: http://jebe.rosaweb.eu/ Why the last column goes on new line? It should not do this :( I know, if I set padding to 0px it will be fine, but I need that padding.. It should pass one row..
Does anybody know where is the problem?
Thank you and I hope you understand my english
Your code is wrong, you're using
<div class="col-md-1">
aa
</div>
when it should be
<div class="col-md-3">
aa
</div>
and if you want to scale columns based on screen size, you could use something like:
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
aa
</div>
This means your columns will take 3 "grid columns" (out of 12) on large screens, 3 on medium screens, 4 on small screens and full width on extra small screens (tablet and smaller)
for more information, take a look to Bootstrap Grid System
I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.
The docs for Grid Options say that all of the grid systems use 12 columns.
If you take a look at Bootstrap 3's docs for an Example Mobile and Desktop layout they show the first row's .col-xs-* classes totaling 18 column units.
What gives? How can this be? Are the docs wrong?
Thank you
Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.
In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
md...
| 8 | 4 |
xs...
| 12 |
| 6 |
EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.
Think of the grid layout more in terms of a different grid for every size, lg, md, sm, and xs (or break points to be specific) that use the same markup. It might help to break open a few browser instances and an example of a grid layout. Follow along with this fiddle, or this markup:
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>
You'll need to know your viewport's width in pixels, so consider a browser plugin that makes this information readily available or open up a console and run this snippet:
Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Start with a viewport > 1200 pixels:
The actual columns are decided by the col-lg-* classes because of the breakpoint. This will create a grid for that breakpoint.
Now look at the other two break points, col-sm-* and col-xs-*.
col-sm-* in affect:
col-xs-* in affect:
The break points allow you to create a completely new grid per size. So, in theory, the rows act as a "strict" new row, where as the col numbers like
<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>
can force a new row if the sum > 12. This is so that you don't have to have umpteen different markup templates for different breakpoints. They are guides.
The amount of rows a column occupies is the last number of the class.
So for example, these following classes:
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
will result in a single row on the md-width displays but one and a half row on xs-width displays.
This simply means that on small displays those elements won't display side-by-side, but instead on top of each other.
I have a website. Can I convert my website into a fluid grid layout? Are there any tools to automate this or do I have to create a fluid grid (in Dreamweaver) and insert <div> tags and insert my styles into it which will finally resemble my website.
There is no tool that I know of which will create a fluid grid layout out of the box to a existing one. This is probably due to the fact that such a tool would have difficulty to decide which kind of grid structure should be used. Always remember that when using grids, the size of a column is fixed and therefore might not resemble the css that you have created using pixel-accurate css styles.
What I would recommend though is looking at the many frameworks out there. They are really easy to use and the only that you have to do is add class names to your div tags.
List of Fluid Grid Frameworks
Fluid 960
CSSGrid
Bootstrap
FluidBaseline
There are like a million more of those. If you are just looking for a grid system that can be easily implemented without any hassle just use Fluid960.
edit
Lets say you had the following structure
<div style="width:100%">
<div style="width:20%>First div</div>
<div style="width:30%>Second div</div>
<div style="width:50%>Third div</div>
</div>
In case of the 16 grid 960 framework you would need to take the 100% as all 16 columns. Therefore 20% (so your first div) will need to be a 3 grid column, your 30% a 5 grid column and your 50% a 8 grid column. Now you have 3 + 5 + 8 = 16 columns. In HTML you just end up writing
<div id="grid">
<div class="grid_3"></div>
<div class="grid_5"></div>
<div class="grid_8"></div>
</div>
And you are done!