Is it possible to create columns in Bootstrap for a small width ONLY?
The default colums are inherited for larger sizes. So a 2 colum layout for for the xs width would also be a 2 colum layout for sm, md, etc.
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
If your "small width ONLY" means that other screen sizes should display like a block, the rendering will be like a 1 column layout. So simply add a layout rule for SM to append it to all >=SM screen sizes.
For example, if you want a 2 column layout for XS only and 1 column layout for all other screen sizes, this should do the trick :
<div class="row">
<div class="col-xs-6 col-sm-12"></div>
<div class="col-xs-6 col-sm-12"></div>
</div>
Related
I’m having an issue with the bootstrap grid. I’m trying to create (3) four column divs on medium screens, on small screens I’m trying to create six column divs that are offset 3 columns so they are centered. and on extra small screens twelve columns. Seems like something I’ve done a million times… but on medium or larger they are stacking using the .sm class… not sure what’s happening?
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
</div><!-- close row -->
here is a codepen: https://codepen.io/aaron4osu/pen/Powpezo
Your post is a bit confusing, but I'll try to help.
Your first issue is using .col-offset- improperly which is preventing your columns from operating correctly (read more about offsetting here: https://getbootstrap.com/docs/3.4/css/#grid-offsetting)
Your second issue is using .col-sm-6 three times.
With the Bootstrap grid system, your column classes must always equal 12 (because it's a 12 column grid). Having .col-sm-6 three times equals 18 (not 12) so Bootstrap will push your 3rd .col-sm-6 column underneath the others.
Also, always wrap a .container or .container-fluid around your .row or you're going to run into problems later like horizontal scrolling.
And finally, to center your divs on sm and xs, just use .col-xs-12 and then your divs will be centered (and 100% width) until they reach the .col-md- breakpoint, and then they will be .col-md-4 (3 columns, because 4 goes into 12 three times):
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">Column 1</div>
<div class="col-xs-12 col-md-4">Column 2</div>
<div class="col-xs-12 col-md-4">Column 3</div>
</div>
</div>
I've been trying to succeed on reordering columns to look like this:
md++:
sm:
xs:
What I have at the moment is this:
<div class='col-sm-4 col-md-3 col-sm-push-8 col-md-push-0' style="background-color:pink;">
pink
</div>
<div class='col-sm-4 col-md-3 col-sm-push-8 col-md-push-6' style="background-color:green;">
green
</div>
<div class="col-sm-8 col-md-6 col-sm-pull-0 col-md-pull-3" style="background-color:yellow;">
yellow
</div>
My problem is that on "sm" they don't stick together on that right side if one of the blocks has heigth different. See this plunker.
I have a customized bootstrap setup to use 960 grid instead of the default width. I have this HTML using the bootstrap grid:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
</div>
However on a specific page I need to be exact in their width, for instance I need the first row to be 280 pixels, the second 500 pixels and the third 160 pixels. How can I do that using the bootstrap grid so that it still will be responsive for mobile devices?
How can I get better control over how Bootstrap 3 is scaling my col width.
Lets say for example that i create two columns using the following code:
<div class="xs-col-6"></div>
<div class="xs-col-6"></div>
When I re-size the window I want the the first column to take up 80% of the space and the right one to use 20% of the space. How can i do this?
This is what I tried:
<div class="xs-col-6" style="width:80%;"></div>
<div class="xs-col-6" style="width:20%;"></div>
With bootstrap you can use column, they are 12, so you can have this (9+3 = 12):
<div class="col-xs-9"></div>
<div class="col-xs-3"></div>
also, you can have different behavior depending on the device size with col-sm-*, col-md-* and col-lg-*.
Like this :
<div class="col-xs-12 col-sm-9 col-md-6"></div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>
And if you want overwrite bootstrap css, you can, but maybe you need to add !important to your css property
I have this code:
<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>
What I want for small (sm) screens is to have two divs that have three columns each, and an offset of 6 columns for the first div.
For medium (md) screens, I would like to have two divs with twelve columns each (one horizontally stacked under the other), with no offsets.
Somehow the browser doesn't recognize the class col-md-offset-0. It still uses the col-sm-offset-6 class. Any ideas why?
Which version of bootstrap are you using? The early versions of Bootstrap 3 (3.0, 3.0.1) didn't work with this functionality.
col-md-offset-0 should be working as seen in this bootstrap example found here (http://getbootstrap.com/css/#grid-responsive-resets):
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
There is no col-??-offset-0. All "rows" assume there is no offset unless it has been specified. I think you are wanting 3 rows on a small screen and 1 row on a medium screen.
To get the result I believe you are looking for try this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>
Keep in mind you will only see a difference on a small tablet with what you described. Medium, large, and extra small screens the columns are spanning 12.
Hope this helps.
If I get you right, you want something that seems to be the opposite of what is desired normally: you want a horizontal layout for small screens and vertically stacked elements on large screens. You may achieve this in a way like this:
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>
On small screens, i.e. xs and sm, this generates one row with two columns with an offset of 6. On larger screens, i.e. md and lg, it generates two vertically stacked elements in full width (12 columns).