How I can order xs size blocks?
I have this code:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
MAIN
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
SIDEBAR
</div>
</div>
</div>
What I want is to get SIDEBAR block on top page when resizing page to xs size.
Thank you!
Try col-*-push-* and col-*-pull-*. push will move the container left and pull will move the container right.
So in your example:
<div class="col-sm-4 col-sm-push-8 col-xs-12">
SIDEBAR
</div>
<div class="col-sm-8 col-sm-pull-4 col-xs-12">
MAIN
</div>
That should do the trick.
Also note that I excluded the lg and md classes. Bootstrap automatically uses the largest available class for larger screens. So if you don't specify lg and md but do specify sm, it will use the sm for medium and large.
Here's a fiddle.
Use col-xs-12
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
MAIN
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
SIDEBAR
</div>
</div>
</div>
Related
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
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 have a WordPress website which uses the Cherry Framework 4 and I wonder how this theme works.
In the footer I see this:
<footer id="footer" class="site-footer wide" role="contentinfo">
<div id="static-area-footer-top" class="footer-top static-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 static-footer-menu"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 static-footer-logo"></div>
</div>
</div>
</div>
<div id="static-area-footer-bottom" class="footer-bottom static-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 static-footer-info"></div>
</div>
</div>
</div>
</footer>
How can I change the settings, so that col-sm-5 col-md-5 col-lg-5 is changed? I want to have it centered all of the width with col-xs-12?
Anybody knows that?
Thanks!
Create child theme to modify footer.
Here is link to create child theme.after that just copy footer.php from parent theme to child theme.
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