I have a bootstrap layout like so:
<div class="container">
<div class="row">
<div class="col-sm-4 top-col-left">
<h4>24 Hour High</h4>
<h1>$7.88</h1>
</div>
<div class="col-sm-4 top-col-center">
<h4>24 Hour Low</h4>
<h1>$1.88</h1>
</div>
<div class="col-sm-4 top-col-right">
<h4>24 Hour Change</h4>
<h1>$2.88</h1>
</div>
</div>
</div>
When viewed on a mobile device the layout will become 3 rows of one column. Is it possible to display this as 1 row of 2 columns and 1 row of 1 column instead?
This will become 2 rows with 2 and 1 columns respectively on xs (<768px) devices
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 top-col-left">
<h4>24 Hour High</h4>
<h1>$7.88</h1>
</div>
<div class="col-sm-4 col-xs-6 top-col-center">
<h4>24 Hour Low</h4>
<h1>$1.88</h1>
</div>
<div class="col-sm-4 col-xs-12 top-col-right">
<h4>24 Hour Change</h4>
<h1>$2.88</h1>
</div>
</div>
</div>
Bootstrap is build around a 12 column grid system, currently your html/css is saying that each column should take up a third of the screen.
If you are wanting to have 2 columns and then wrapped underneath a single column then something like this would work,
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-12"></div>
You can add other classes for larger screens sizes.
Related
I'm struggling right now with the order of the columns and rows of a bootstrap layout and I'm wondering if what I'm trying to do is even possible using bootrsap's rows/columns grid system.
So, I have the following layout for large devices:
And I want the columns to be reoredered on small devices like this:
Problem is... I have this "column 2" and I can't break it in two parts :D
Is there another way to achieve the same kind of layot using bootstrap?
Thanks in advance!
Edit
So, the large devices layout would be something like the this:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8">
<div>
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
<div class="row">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
See it on codepen: https://codepen.io/lucas-labs/pen/yLLeVxO
To change the column order, the columns must share the same parent. The only way to get this to work in Bootstrap 4 would be to disable the flexbox on lg and use floats.
<div class="container-fluid">
<div class="row mainrow d-lg-block d-flex overflow-auto">
<div class="col-12 col-lg-8 first-column float-left">
<div class="big-data-table">
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right order-first">
<div class="row myrow">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right">
<div class="row myrow">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/V9eB4jUNhw
This question already has answers here:
Equal width flex items even after they wrap
(2 answers)
Closed 4 years ago.
I have a basic Bootstrap 4 grid like this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).
How can I prevent this from happening?
Use flex-nowrap on the row...
<div class="container">
<div class="row flex-nowrap">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
https://www.codeply.com/go/w8H4wPL8Vj
Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.
For example,
<div class="container">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
You can use the bootstrap breakpoints in col by add extra few classes such as:
col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.
You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.
Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/
I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
According to Bootstrap docs:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
For example, I have:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
And the last column is behaving what I thought would be incorrect according to the docs. When you resize the viewport in the following example here, you can see that the 7th column has irregular behavior for small viewports. The column seems to fill the width/height of the parent element.
Is there an out-of-the-box way to fix this with bootstrap? Feel like I'm overlooking markup but I'm going cross-eyed at the moment...
I think your problem has to do with the fact the col-*-12 bootstrap classes don't float.
You can either add a float: left to your 7th column with col-sm-12 or you can add a clearfix before the col only visible at the breakpoint where it becomes 12 (sm).
like this:
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
you can see this fiddle
but doing this might be cleaner:
<div class="col-xs-12 col-md-4 pull-left">
Col 7
</div>
here is a demo of that solution.
You can run into a lot of issues when overloading rows, so its usually recommended to avoid it as much as you can and wrap things in .rows.
I have home page with following code:
<% #events.each_slice(3).to_a.each do |chunk| %>
<div class="row row-centered">
<% chunk.each do |event| %>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-centered">
centered content with max-width 300px
</div>
<% end %>
</div>
<% end %>
On big screen it works well. But when I change the size of browser, columns goes from 3 per row to 2 per row and the one left column goes to next row. So I have:
2 columns
1 column
2 columns
1 column
Is there any universal solution for responsive columns generated using #objects.each_slice(3)?
That's because you have the following classes:
col-xs-12 col-sm-6 col-md-6 col-lg-4
That means: 3 per row on a big screen, 2 per row on the middle screens, 1 per row on the mobile.
If you change to:
col-xs-12 col-sm-4 col-md-4 col-lg-4
This will make 3 per row on all the screens except from mobile where will be 1 per row.
So, my solution is pretty simple. On homepage I'll be showing exactly 12 posts. Given that, i changed my code to this:
<div class="row row-centered">
<% #events.each_slice(3).to_a.each do |chunk| %>
<% chunk.each do |event| %>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-centered">
<div class="thumbnail">
</div>
</div>
<% end %>
<% end %>
</div>
Given that I'm not generating row with 3 columns, but one row with 12 columns - and I let Bootstrap to deal with.
HTML example showing how Bootstrap responsive grids react to re-sizing
I wrote this HTML snippet to help whenever I want to figure out which combination of Bootstrap classes to use. It might help you too.
<div class="row">
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row">
<div class="col-md-4" style="background-color:red">.col-md-4</div>
<div class="col-md-4" style="background-color:pink">.col-md-4</div>
<div class="col-md-4" style="background-color:yellow">.col-md-4</div>
</div>
<h3>Three unequal columns</h3>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row">
<div class="col-md-3" style="background-color:red">.col-md-3</div>
<div class="col-md-6" style="background-color:pink">.col-md-6</div>
<div class="col-md-3" style="background-color:yellow">.col-md-3</div>
</div>
<h3>Two columns</h3>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row">
<div class="col-md-8" style="background-color:pink">.col-md-8</div>
<div class="col-md-4" style="background-color:yellow">.col-md-4</div>
</div>
<h3>Two columns with two nested columns</h3>
<p>Per the documentation, nesting is easy, just put a row of columns within an existing column.</p> <p>This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row">
<div class="col-md-8" style="background-color:yellow">
.col-md-8
<div class="row">
<div class="col-md-6" style="background-color:lightgreen">.col-md-6</div>
<div class="col-md-6" style="background-color:pink">.col-md-6</div>
</div>
</div>
<div class="col-md-4" style="background-color:lightgray">.col-md-4</div>
</div>
<h3>Full width, single column</h3>
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
<h3>Mixed: mobile and desktop</h3>
<p>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.</p>
<p>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.</p>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:red">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4" style="background-color:lightgray">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4" style="background-color:lightgray">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4" style="background-color:yellow">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4" style="background-color:lightgreen">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6" style="background-color:lightgray">.col-xs-6 </div>
<div class="col-xs-6" style="background-color:lightgreen">.col-xs-6</div>
</div>
<hr>
<h3>Mixed: mobile, tablet, and desktop</h3>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" style="background-color:lightgray">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4" style="background-color:yellow">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4" style="background-color:lightgreen">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4" style="background-color:pink">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4" style="background-color:lightgray">.col-xs-6 .col-sm-4</div>
</div>
<hr>
<h3>Column clearing</h3>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lightgray">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
<div class="col-xs-6 col-sm-3" style="background-color:yellow">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgreen">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:pink">.col-xs-6 .col-sm-3</div>
</div>
<hr>
<h3>Offset, push, and pull resets</h3>
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
<div class="row">
<div class="col-sm-5 col-md-6" style="background-color:lightgray">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:yellow">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6" style="background-color:lightgreen">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" style="background-color:pink"<>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0" </div>
</div>
</div>
How to make bootstrap separate add a row responsively. Maybe it is better draw it :D.
So here is what i have:
And here is what i want to end up with:
My html i like this but i know it doesnt work since it separates the first and the 2nd row into 2 rows (1st row 2 columns and 2nd row 1 column with the size of 6). So how to make this work,since i just started learning bootstrap today :)
My html
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
Would making all the columns child of a single .row work for you?
<div class="row">
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
</div>
I don't think it would be easy/practical to make new rows like you want.
If you want the rows only for styling purposes you are better off using css and determine different styles when the layout changes