I am using a container class around my bootstrap 3 layout so that it has proper width for medium and large screens. However, it also affects small screens. I'd like to have a width of 100% for small screens (sm) and not only for extra small screens (xs). In other words I'd like to suppress the effect of the container for small screens. Is there a simple way to achieve this without defining my own container classes and media queries?
I think only way to get exactly what you want is to define your own container.
Another option is to use col-sm-12 as a full width wrapper instead. However, this will also be wide on md and lg
Or, you could use col-md-10 for a narrower wrap on md and lg, then switch to col-sm-12 for full width sm and xs
See demo: http://bootply.com/111713
Related
Scenario
Let's say I have two divs, side by side.
div1: 500px wide
div2: taking up the remaining width
I want the items in div2 to be responsive using bootstrap so that I can leverage xs, sm, lg, xl respectively eg mt-sm-3 which specifies the margin top ONLY for the small sizes.
Furthermore, I don't want the bootstrap sizing to trigger based on browser window width but instead the width of the containing parent div.
Question
Is this possible with bootstrap? If so, how?
Thoughts
Spoofing classes for div2 eg. have javascript attach, as classnames, custom-[xs,sm,lg,xl] depending on the size. This would be a ridiculous amount of busy work and kind of defeats the purpose of using such a widely adopted css library.
Put an iframe inside of the div which has bootstrap loaded into it. I don't necessarily like this one because I'm working with a react/redux project and it becomes a bit of a nuisance to pull this off.
Try the below structure
<div class="d-flex">
<div style="width:500px;"></div>
<div class="w-100"></div>
</div>
I ended up writing my own solution. It works by checking target div size every 100ms then attaches a size to it: xs, sm, md, lg, xl and will work with custom sizing metrics. I put a couple examples in my basic index.html
https://github.com/jacksonkr/substrap/tree/dev
I am just starting with Bootstrap and going through docs. Right now, seems very confusing and have some queries as follows:
In the Grid Options table, why the container width is always less than device width, why not equal to device width for e.g.Small devices Tablets (≥768px).
How the width 750px is determined, why not 743px or 755px or any other size. How did they determine that 750px as container width.
As given, bootstrap scales up to 12 columns with gutter between columns and each column width is
~62px and gutter is 30px (15px on each side) therefore
(12(cols)*62px ) + (11(gutters) * 15(width)) equals to 909px instead of the given 750px container width. Why ?
This is all is very confusing to me. Could someone plz show how the container widths are calculated for different breakpoints and why the container width is not equal to device width ?
Thanks
dk
The Bootstrap .container is used as a centered container, if you want full-width on all devices use .container-fluid
The 62px is actually 62.5px at the small breakpoint. 62.5 x 12 = 750px, and this includes the 15px padding around each column. The gutter is within the column since padding is used (as opposed to a margin where the gutter would be outside the column).
Here's a nice visual demo: http://www.codeply.com/go/Sul9kw8Kne
Aside from the container width, take a look at this article about the BS3 grid
First of, If you want a container to equal to device width use
container-fluid instead of container
For the Grid system there are two concepts
Boxed layout (.container provide this)
wide layout (.container-fluid provide this)
in bootstarp there is no pixels for grid every thing in in percentage (%) only.
all media quire break points are setup through bootstartp it self you may change those values through bootstrap customizer http://getbootstrap.com/customize/.
Using Bootstrap 3 the width of extra small screen is 767px. I want to keep 2 columns till say 600px and then go to one column. Seemingly bootstrap does not have this built in and whatever columns are set for 767px will be the same to 0px.
Nexus 7 for example is about 600px wide. Most phones are 350 wide - http://mydevice.io/devices/. Is 767 a bit wide for extra small?
Seemingly I have to add my own style - xxs, but where can I get the needed width % etc? How would I work out needed width %? Is there a site that can generate the css?
BASED ON #cvrebert ANSWER :
A bootstrap online LESS complier can be found here - http://getbootstrap.com/customize
The #screen-sm variable changes the xs col width.
One option mentioned in Bootstrap's docs is to change what the boundary between the extra-small (xs) and small (sm) screen sizes is by simply changing the value of the #screen-sm-min LESS variable (which lives in Bootstrap's variables.less file) and then recompiling Bootstrap's CSS.
If my browser is sized to be 992px wide, then .container has a max-width of 970px. If my browser is sized to be 991px wide, then .container has a max-width of 750px. Why is there this big jump in the max width? Why not just have a max-width of 1170px or so with 20px of margin on each side or something so that as you resize your browser window the container width scales smoothly instead of having a big jump?
E.g. at 992px screen width I have only very little margin on each side (11px). Yet at 991px wide I have 120px of margin on each side, which means nearly 25% of the screen real estate is empty margin on the sides. This doesn't make a lot of sense to me. Is there a reason this was done? Can I remove this behavior of preferring certain container widths without breaking things?
The official answer from the Bootstrap folks:
What it boils down to is that designing for specific breakpoints is
easier (in my mind) than designing for unlimited, unknown sizes. The
alternative you mention isn't wrong or bad, just different. I'd rather
us maintain the tiers with very specific ranges
This is because fixed-width + margin = break point. In bootstrap the margin grows while the container remains at a fixed width. When the browser is res-sized past break-point the container jumps just below break-point.
This is how Bootstrap and its grids work. Bootstrap defines 4 grids, see this table. Depending on screen size, one of these four grids will be used. 992px screen width is the breakpoint between the small and the medium grid.
Grids fit horizontally and scroll vertically as we are used to. For this reason the smaller grid will be applied below 992px.
The maximum container width can be "calculated" by finding which width can contain 12 equal-width columns plus any gutters. For the small grid 12 x 60 makes 720. The padding is constructed of 15 pixels on both sides of the column, minus 2 x 15 pixels on the outside of the grid. Those missing pixels (constructed with a negative margin) make 720 + (2 x 15) = 750.
750 px seems very small in relation to the 991px your mentioned. The small grid is intended for use on devices with a screen width of 768px and the medium grid for screen widths of 992px.
I used
.container {
max-width: 100%;
}
in Bootstrap 4, and that removed it for me. Be careful applying that globally though. You can do this for specific containers instead:
.container.some-specific-class {
max-width: 100%;
}
<div class="container some-specific-class">
xyz...
</div>
Thanks to Dorian for the initial tip.
Twitter bootstrap 3.x changes the grid model so that you set grid cell width and which media size to apply it to:
e.g. col-md-4, col-lg-12 (previously span4, span5)
Is there some short hand to specify the same cell size for any media size? So I don't have to do this to get the item to be a 4 grid cell across all media sizes:
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">...</div>
Yes! there's absolutely no need to use it as you shown.
You can use <div class="col-xs-4"> for all grid sizes. Bootstrap Grid use the smaller for all the grid up.
also you can use <div class="col-md-4"> to apply 4 for md and lg size but block on lower media size.
Bootstrap is smart enough to understand that if at a smaller XS size the column should be of size 4 to apply to the rest of greater width size with no problem. (you can, of course, override specifying each grid size)
hope it's clear enough :D