How do I Use grid bootstrap this way?
I want to scale RIGHT panel first, but bootstrap scale MOBILE from LEFT
_______________________________________
Bootstrap:
1 2 3
I want:
3 1 2
_______________________________________
PS.
I Want that grid will be in this same position relative to the height
___1____ ____2_____ ____3______
NOT
___3____
___1____ _____2______
try this to make 3 in RIGHT
<div class="col-md-4 col-md-push-8">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4 col-md-pull-8">3</div>
Related
I have created a grid at bootstrap but when I do not have enough cards to fill the page they get spaced vertically. I want them to be grouped with a fix gap between them.
Find image's url attached.
Just check how to work grid in browser
https://getbootstrap.com/docs/3.3/examples/grid/
and use like
<div class="container">
...
</div>
<div class="row">
...
</div>
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 two main columns in a bootstrap website. The first is the sidebar column and the second is the main content column. In Desktop they appear fine but in Mobile the sidebar doesn't go under the main-content area.
You could see a live example for this in one of the regular nodes of my site, just view the site in mobile mode, browse downwards a bit, and you will see this.
Please help,
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
http://getbootstrap.com/examples/grid/
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
http://getbootstrap.com/css/
To address your issue
In Desktop they appear fine but in Mobile the sidebar doesn't go under the main-content area.
You should not modify the bootstrap grid, but you can use the existing bootstrap grid to achieve what you want.
For example
Remove any CSS which modifies the grid and change this...
<div id="primary" class="content-area col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-sm-4" role="complementary">
...
</aside>
To...
<div id="primary" class="content-area col-xs-12 col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-xs-12 col-sm-4" role="complementary">
...
</aside>
This tells the browser
If the viewport is less than 750px wide, the columns should take the entire width, else they should be displayed side by side
Changing column widths
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
When you have define the columns using the prefixes, col-xs- col-sm- col-md- and col-lg-, the numbers following the prefix must add up to 12 for each row.
Four examples
If you would like two columns of the same width you would use
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
6 + 6 = 12
If you would like three columns of the same width you would use
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
4 + 4 + 4 = 12
If you would like two columns where one column is twice the size of the first you would use
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
4 + 8 = 12
If you would like two columns where one column is three times the size of the other you would use
<div class="col-sm-3"></div>
<div class="col-sm-9"></div>
3 + 9 = 12
And so on and so forth
Remove you CSS changes and Use col-lg-9 on primary and col-lg-3 on sidebar instead of current code.
Primary
<div id="primary" class="content-area col-lg-9">
Sidebar
<aside id="sidebar" class="col-lg-3" role="complementary">
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
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