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.
Related
I am having problems with bootstrap and creating a layout for bigscreens/resolutions (1920x1080). I don't have a screen with 1920x1080 resolution but i am using Chrome devtools:
Questions/problems i have
i don't have a good template to give to the designer ( i found https://dribbble.com/shots/4108255-Responsive-PSD-and-Figma-Grid and download web.1920.psd). The current design layout is pixel perfect for a 1920x1080 screen. I am in the midst of telling them the layout is responsive and not equal in pixels for all screens
i am also using https://github.com/BenWhitehead/bootstrap-big-grid and i like use the col-fhd-x classes, i don't see where the container width is being set for the 1920 break width (which should be 1890px (1920-30)?)
based on the 1910.psd template i assumed 2 colums would be 250px in width?? but it is 281.xxxx
Any tips how to design for bigger screens with bootstrap??
I need to have one 740px column for the content and one 320px for the sidebar so the container must be 1060px.
Is there anyway to get this exact grid size in bootstrap ?
I know I can customize there http://getbootstrap.com/customize/ but i dont know the exact numbers for get it.
You won't really get this "exact grid size in bootstrap" since the Bootstrap grid uses percentage-based columns widths.
The simplest approach is to override the Bootstrap css to set a specific width on those columns, which will (of course) result in the columns no longer being responsive. You can still use the responsive grid nested inside the outer columns, and other Bootstrap features.
2-columns fixed width layout: http://bootply.com/B9ti0Rjer1
You could optionally use a media query to apply the fixed widths on larger screens only: http://bootply.com/5Kv1z1XCQK
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
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.
I'm adapting the Masonry Tumblelog layout so that the single column width is 320px and multiples of that for two/three columns etc, so that it will work for iPhone and up.
I'm using media queries to squash the all columns down to the 320 for iPhone. It's kind of working, i.e. it's stacking and reducing to one column. Problem is that it is tiny on the iPhone screen, covering only about a 5th of the width. I've followed the css elements from the div upwards and all are set to 320 in the media queries. The site is at http://www.4pixels.com. Any ideas?
I use the code here : http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/
It adjusts the column width according to the container's width. Take a look.