if we use bootstrap 3, we can write
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
</div>
<div>
but how to do the same in bootstrap 4? I tried with <div class="col-6 col-12"> but it only works as col-lg-12 (full width). I need to use same div with different classes like in BS3, in BS4. how can I do that?
Your example in BS3:
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
</div>
<div>
BS4 version:
<div class="row">
<div class="col-md-6">
</div>
<div>
In the above code below medium devices, it will be full width (12 cols) as that's the default.
In medium-sized devices and above it will be 6 cols wide.
You can use col-12 col-md-6 as your classes.
Related
https://codepen.io/TheNoviceProgrammer/pen/JJzvQq
For the desktop and iPad I want the div to display it as
|1||2| Which it is displaying.
but on sm(small) and xs(extra small) mobile device I want it to display it as
|2|
|1|
I have tried bootstrap's push and pull for xs and sm but it's not working. Whereas using push(col-md-push-xx) and (col-md-push-xx)pull for xs and sm the layout of iPad and Desktop changes to |2|1| while mobile display remains the same as
|1|
|2|
I think I may have used the classes in div in a wrong way, If someone can help me out it would be much appreciated. Thanks.
My HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xs-12 col-xs-offset-0 col-sm-12 col-sm-offset-0 col-sm-offset-right-0 col-xs-offset-right-0">
<div class="row">
<div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-2">
<div>Labels & a bootstrap well</div>
</div>
<div class=" col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 col-md-6 col-lg-4 col-lg-offset-0 col-lg-offset-right-2">
<div>Labels & a Table Gridview</div>
</div>
</div>
</div>
<div class="col-md-1 col-lg-2"></div>
</div>
</div>
After using col-md-push and pull it overlaps as below for tablet and desktops:
[![enter image description here][5]][5]
While in mobile device its still showing same as the mobile screenshot above.
Demo Pen
Yep your instincts are correct that push and pull are the way to go. They should be: col-md-push-6 and col-md-pull-6 for Bootstrap 3. Here's a link to a pen that will help you. Also remember that the class sizing is inherent, you can call col-xs-12 and the small break point will inherit the 12 column width as well.
HTML:
<div class="container-fluid">
<div class="row">
<div class="well col-xs-12 col-md-6 col-md-push-6">Labels & a bootstrap well</div>
<div class="grid col-xs-12 col-md-6 col-md-pull-6">Labels & a Table Gridview</div>
</div><!-- row -->
</div><!-- container-fluid -->
I want take 1/3 width of a single row for all device.
Is there any other option to do instead of this code....
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8"></div>
</div>
Since Bootstrap is defined mobile first, you should be able to just define the xs size, like so:
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8"></div>
</div>
use col-xs-4 it can act md-4 and lg-4 on larger devices.
you cannot use md-8 there is only 12 grids.
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>
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
Can I mix different columns (col-xs-, col-sm- etc) in my layout?
For example, I have:
<div class="col-xs-12">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
and more many col-xs columns.
But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
And it works, but this is correct with bootstrap grid system and standards?
Or Maybe I have to add "col-sm-*" to others? :
<div class="col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Or maybe I have to keep "col-xs-12"?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
...
</div>
<div class="col-xs-12 col-sm-12">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
<div class="col-xs-6 col-sm-6">
...
</div>
Which versions is correct? How do I properly mix different types of columns?
Bigger sizes override smaller sizes (e.g. col-sm will override col-xs unless the screen is smaller than col-sm). Personally I always add a col-xs and I only add the bigger sizes when I need them.
Example:
<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
...
</div>
This information is all found in Bootstrap's Documentation. It is perfectly fine to add multiple col-*-* classes to a <div> element:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>
Is a perfectly viable class structure, that renders different column sizes depending on the current size of the viewport. If xs, it would be a full-width column. Small is half, medium is a 3rd and large is a 4th (based on a 12 column layout.)
If you need more information, take a look here:
Bootstrap Grid System
All the other answers explain what overrides what, but to answer your question about what you have to have, the default is 100% width. So if you only specify:
<div class="col-sm-6">
...
</div>
then when you get smaller than 768px it will go from 50% (6 columns) to 100 (12 columns)
Column sizing will default with the smallest size first (xs) with subsequent classes overriding the original size.
For example:
<div class="col-xs-12"></div>
Will appear as with 100% width on all browsers.
The following will appear as 100% on mobile browsers and 50% on tablets and up.
<div class="col-xs-12 col-sm-6"></div>