I m trying to move to the new boostrap 3 grid and I m facing some difficulties.
How to have the grid to stack below 480px but not between 480px and 768px?
above 768px the padding left of the first and the padding right of the last are outside the container, but below 768px the padding is inside the container so the look is different because the content is no more aligned with a container that could be above.
when the grid stack the padding remain but to me it should be at 0.
Any help would be welcome I m using the code below with bootstrap 3 RC1
<div class="container" style="background-color: purple;">
container
</div>
<div class="container">
<div class="row">
<div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
<div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
<div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
</div>
</div>
update jan 2014
See also: https://github.com/twbs/bootstrap/issues/10203
update 21 aug 2013
Since Twitter Bootstrap 3 RC2 the col-* mentioned below has been renamed to xs-col-*
There are four grid classes now: xs-col-* (mobile, never stacks), col-sm-* (tablet, stacks below 768px), col-md-* (laptops,stacks below 992 px) and col-lg-* (desktop, stacks below 1200px).
update
In my previous answer i use this table from the recent docs:
[old image removed]
When i test this values if found something different:
"col-xs-*" will be applied always (never stacks)
"col-sm-*" will be applied between 768 and higher (992px) (stacks at 767)
"col-lg-*" will be applied between 992 and higher (stacks at 991)
In variables.less you will find:
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
#screen-tiny: 480px;
#screen-phone: #screen-tiny;
// Small screen / tablet
#screen-small: 768px;
#screen-tablet: #screen-small;
// Medium screen / desktop
#screen-medium: 992px;
#screen-desktop: #screen-medium;
But there doesn't seem to be a breakpoint at 480px (or as #fred_ says the grid is missing the col-ts-* (tiny to small) set of classes). See also: https://github.com/twbs/bootstrap/issues/9746
To set the stacking point at 480px you will have to recompile yours css. Set #screen-small to 480px; and define your cols with:
<div style="background-color: red" class="col-sm-4"> after that.
Note this will change #grid-float-breakpoint also cause it is defined as #grid-float-breakpoint: #screen-tablet;.
When adding a row to the container i don't find problems with padding.
Or try: http://www.bootply.com/70212 it will stack below 480px by adding a media query (the javascript is used for illustration only)
previous answer
From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.
With your "col-4" prefix the grid will never stack. So remove "col-4" to let your grid stack below the 480px. This also will remove padding cause is stacks now.
See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ and Writing Twitter's Bootstrap with upgrading to v3 in mind
Use class .col-ts-12 for all 100% divs under 480px and put this code at the end of bootstrap.css:
#media (max-width: 480px) {
.col-ts-12 { float: none; }
}
To implement any changes for tiny to small devices you will need to include your own media queries to add your own additional breakpoints.
For example:
#media (max-width: 480px) {
.no-float {
display:block;
float:none;
padding:0;
}
}
I am not quite sure what you are trying to achieve with this but this is how you would apply styles where the screen width is below 480px.
Related
In bootstrap 5 justify-content-sm-center is not working as expected. I want to centerlize a particular div in smaller screens (say below 578px) and I applied this to that particular division. But its not working. When I exapnd the screen size to more than 576px, it starts working. In the bootstrap css the media query is like this
#media (min-width: 576px)
.justify-content-sm-center {
justify-content: center !important;
}
So it will work over 576px only. Whats the resolution ?
In bootstrap 5 justify-content-sm-center is not working as expected.ie not working in smaller sceen sizes
Bootstrap is thought mobile-first so if we refer to the available breakpoints, if you need your elements to be centered under 576px you need to use .justify-content-center. And after 576px, so with a sm class you can specify another behavior.
In other words, you could do the following to have your content centered when <=576px and then left aligned (in LTR) when >576px.
<div class="w-100 d-flex justify-content-center justify-content-sm-start">
Flex item
</div>
I have my simple markup
<div class="row">
<div class="col-lg-6 loginField">
data
</div>
<div class=" col-lg-6 loginField">
<div class="">
test
</div>
</div>
</div>
.loginField{
background-color:white;
}
so my problem is that i am getting 1 white line on desktop screen, but i want to make a 10 px space between those 2 columns without destroying responsive design. Right now if i switch to smaller screen it works, but on desctop there are no space, and if i add margin, this margin presist on smaller screens which is ugly.
P.S. when i say it works on smaller screens, i mean that those 2 columns move under each other and width of the white lines are as they shopuld be.
You simply need to mimic the same breakpoints in the responsive design as is in bootstrap.css:
http://jsfiddle.net/G6nWh/4/
CSS:
#media (min-width: 1200px) {
.margin-left-10 { margin-left: 10px; }
}
HTML:
<div class="col-lg-6 loginField">
<div class="margin-left-10">
test
</div>
</div>
If you have changed the breakpoints, you'll need to update that min-width, but this is the default min-width for Bootstrap's large columns.
When the screen gets smaller, the rule stops being applied, so it won't affect your smaller screens.
In Bootstrap 3, you can use the following code to build a row with 3 columns that collapse onto one another as the screen width decreases:
<div class = 'row'>
<div class = 'col-md-4'>
Some text
</div>
<div class = 'col-md-4'>
Some text
</div>
<div class = 'col-md-4'>
Some text
</div>
</div>
I am working on a project right now where I would like to achieve the same effect, but without having to load Bootstrap.
How does Bootstrap achieve the 'stacking' effect that you would get from the above?
The basic idea is that the width of the columns work on percentages. So in your example the width of each column might be 33.333% and then you use a media query to say at a certain resolution the width of items change and they stop floating or whatever else you want to make them do on a smaller resolution.
Here's an example of a media query where any device with a resolution with a maximum width of 767px will be affected.
#media (max-width: 767px) {
.col-md-4 {
width: 100%;
float: none;
}
}
Here's a great article by Ethan Marcotte who is pretty much credited with creating what we now know as responsive web design:
http://alistapart.com/article/responsive-web-design/
I have a couple of questions I hope you help me to clarify about working with semantic markup, using less with bootstrap 3 mixins.
First, columns setup:
On a non-semantic html you'd declare the cols on the div class <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div> as example.
As stated on bootstrap documentation you should declare the amount of columns for a given div with the .make-xx-column(#columnms), but, if you want to replicate the non-semantic it's supposed that code would be:
.make-lg-column(4); .make-md-column(6); .make-sm-column(12); .make-xs-column(12);
With this I found that when you are on a big resolution (more than 1200px) and if I have defined .make-lg-column(4); and .make-md-column(6); the result will be the 6 medium columns will be showed. On my inspector it shows as #media (min-width: 992px) and will rule over the #media (min-width: 1200px)
What is then, the correct way to set the different column values for a div? It seems to not be equal to how you'd set them up on a non-semantic layout.
Finally a question about padding,
Why when on the regular bootstrap css the column has a defined padding (15px as default) on the mixins the default padding is 0px? That forces to set the padding each time you declare a column amount (.make-lg-column(12, 30px);) ?
I appreciate if someone can help me working with this the right way, I'm sorry but It's the first time I work with LESS and semantic html code with bootstrap.
I'm sure that this question has an answer on SO already, but for the time being.
You should call the mixins for the smallest grid (xs) first, or better call the mixins from small to width. (kind of mobile first)
The above make sense because of the media queries for the grid are defined with min-width, see also http://getbootstrap.com/css/#grid.
If you set the largest grid first (min-width:1200px) follow by (min-width:992px) then both will evaluate true for screensize wider than 1199 pixels, and so the latest override the first.
You should use:
.make-xs-column(12);
.make-sm-column(12);
.make-md-column(6);
.make-lg-column(4);
Why when on the regular bootstrap css the column has a defined padding
(15px as default) on the mixins the default padding is 0px? That
forces to set the padding each time you declare a column amount
(.make-lg-column(12, 30px);) ?
The default grids have a gutter of 30 pixels (set by #grid-gutter-width) between the columns. 15 pixels on each side of the columns, makes 2 x 15 pixels between each column.
Why when on the regular bootstrap css the column has a defined padding (15px as default) on >the mixins the default padding is 0px? That forces to set the padding each time you declare >a column amount (.make-lg-column(12, 30px);) ?
I found that:
#import "variables";
#import "mixins";
selector {
.make-lg-column(12, 30px);
}
compiles into CSS code as follows:
selector {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 1200px) {
selector {
float: left;
width: 100%;
}
}
Bootstrap uses predefined sizing to maintain responsiveness behavior regardless of the screen size. I know you are thinking "1200px is 1200px regardless the screen. But remember we are talking about percentages. So, if you were going to display a gallery with a tiles side to side in a laptop, you'll be fine with:
<div class="col-md-3">picture 1</div>
<div class="col-md-3">picture 2</div>
<div class="col-md-3">picture 3</div>
<div class="col-md-3">picture 4</div>
They will fit just fine and keep a great display. But will that be the case if the split the width of the screen 4 ways in a smartphone? Probably too small, right? In that case, you'll be better off with:
<div class="col-xs-12">picture 1</div>
<div class="col-xs-12">picture 2</div>
<div class="col-xs-12">picture 3</div>
<div class="col-xs-12">picture 4</div>
This way they display accross the entire screen
In summary, ideally, you'd want to do the following:
<div class="col-md-3 col-xs-12">picture 1</div>
<div class="col-md-3 col-xs-12">picture 2</div>
<div class="col-md-3 col-xs-12">picture 3</div>
<div class="col-md-3 col-xs-12">picture 4</div>
Hope that helped
Regarding twitter bootstrap, I currently have a design showing pictures in a grid
<div class="row-fluid">
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
<div class="image span-4"></div>
....
</div>
This works quite well, showing 3 pictures in a row on desktop and tablet.
On mobile, they only show one under each other.
Do I have the possibility to show 2 columns next to each on mobile?
Thanks for your help
Below the 768 pixel width the (fluid) grid stack the elements. Add a media query below your bootstrap css include:
#media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } }
Note in your example code you use many span-4's in a row. The total span of a row should be max 12.
Cause you use a odd number of images, you will get the last row with one image 50%. To get images of different row together you will have to reset the display:table of your fluid row. Add an extra class to your rows like 'inline' and use the media query to reset like:
#media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } .inline:before,.inline:after {display: inline-block; content:none;} }
Example: http://bootply.com/62893
Twitter Bootstrap 3.0
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). (based on TB3 RC1)
For mobile you could use the “.col-” prefixes (tiny grid) but you still got the problem with the odd number of images in a row. To fix this you could try to add 24 for columns in a row instead of 12. Or use the same solution as above for TB2.
See: http://bootply.com/70644
In Twitter Bootstrap 3.0 there will be a grid for small devices too. You can use this by adding an extra class col-small-span-* to your divs. Note span-* is renamed to col-span-*. So you will get:
<div class="image col-span-4 col-small-span-6"><img src="//placehold.it/350x150">/div>
This will give you 3 (12/4) columns of 33% on the default grid and 2 (12/6) columns of 50% on the small grid. See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/