I have a div that has two columns - one holds a glyphicon, the other holds text. At larger sizes, this works correctly:
But when the browser is at a smaller width (or mobile), the columns split, and it ends up looking like this:
Is there any way to force the columns to stay together in a single row? There's plenty of room for both columns, even at the narrowest size.
Here's my HTML for a single row:
<div class="row">
<div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
<div class="col-md-10">
<p>Zero Day Protection</p>
</div>
</div>
The CSS is standard bootstrap (the i class is a FontAwesome glyphicon).
Use the col-xs-* Grid classes.
<div class="row">
<div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
<div class="col-xs-10">
<p>Zero Day Protection</p>
</div>
</div>
In a bootstrap grid, your columns are all 100% wide by default. Use the col-<size>-<number> classes to override that. The <size> can be either xs, sm, md, or lg, and refers to the minimum screen width for that class to apply. The <number> is a number from 1 to 12 and refers to the number of columns wide your content should be.
So, maybe you have really wide content, and it should only be displayed side by side on desktop browsers. You could give your content class="col-md-6" and it would display side by side as long as the browser window is at least 992 pixels wide.
But, for you, since your content is really small, you want it always to display side by side, so you should use col-xs-<number> classes.
You could make it so that on mobile, you have one pair per line, but on tablets you have two per line, and on desktops you have 3 per line:
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Adaptive Updates</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Online Support and Knowledge Base</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Direct Support</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Enterprise Management Console</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Zero Day Protection</p>
</div>
</div>
</div>
See the bootstrap Grid System documentation for more detail.
class="col-md-2 col-xs-2" and class="col-md-10 col-xs-10"
You can combine classes for the element to make it behave certain way based on screen size. You can do something like class="col-md-2 col-xs-6" and class="col-md-10 col-xs-6" etc...
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 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 have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?
http://www.bootply.com/K3G0VtD0OS
<!-- always Stay top right and maintain the same size-->
<div class="col-xs-6 col-sm-2 pull-right">
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
<!-- LOGO Always stay top left no matter what size-->
<div class="col-xs-2 col-sm-12 col-md-2 logo pull-left"> logo image </div>
<!-- Always stay to the right of logo but at tablet, drop below the 1st and second column -->
<div class="col-xs-12 col-md-8 pull-left">
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the pull-right class on it).
You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in col-sm (tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in col-md and higher.
Updated bootply
Change One:
<div class="col-xs-6 col-sm-3 col-md-2 pull-right"> <!-- Change col-sm-2 to col-sm-3 and add col-md-2 -->
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
</div>
Change Two:
<div class="col-xs-12 col-sm-7 col-md-8 pull-left"> <!-- Add col-sm-7 -->
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
</div>