How does Bootstrap switch from one class to the next? - css

I am trying to understand Bootstrap 3's responsiveness. I understand in css if you have 2 classes on an element, then the 2nd class will override the first class. But, when you create a responsive design with Bootstrap, your element will look something like this:
<div class="col-sm-1 col-md-6 col-lg-11"></div>
Is it the css that switches between these classes depending on the size of the screen? Or does the javascript manage this? From my understanding, the attributes in col-lg-11 would always overwrite the other 2 classes, but obviously my understanding is incomplete.

It's managed by CSS.
The CSS rules are written in a specific order, and it's this order which make Bootstrap "mobile first". You'll apply, in the right order :
col-xs-n
col-sm-n
col-md-n
col-lg-n
Example for <div class="col-xs-1 col-sm-1 col-md-6 col-lg-11"></div> :
...
.col-xs-1 {}
...
#media (min-width: 768px) {
...
.col-sm-1 {}
...
}
#media (min-width: 992px) {
...
.col-md-6 {}
...
}
#media (min-width: 1200px) {
...
.col-lg-11 {}
...
}
You'll first have col-xs-1 rules applied.
If your screen has a width >= 768px, then you apply col-sm-1 rules. As the same element have both classes, col-sm-1 will override col-xs-1 (the last rule written always gain the upper hand).
If your screen has a width >= 992px, then you apply col-md-6 rules, which will override col-sm-1.
If your screen has a width >= 1200px, then you apply col-md-11 rules, which will override col-md-6.

It is indeed the CSS that switches between these classes depending on the size of the screen using CSS #media queries (no javascript).
The col-lg-11 does not "override" the others. The col-md-6 is applied on medium width screens, and the col-sm-1 is applied on small width screens, so in this way the other classes override the col-lg-11.

Related

In bootstrap justify-content-sm-center not working as expected

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>

How can I change column widths in bootstrap when I only have access to CSS (no way for me to change the HTML)?

<div class="col-12 col-md-7">column md-7</div>
<div class="col-12 col-md-1">spacer md-1</div>
<div class="col-12 col-md-4">column md-4</div>
I've volunteered to do some work on a page for a conference about accessibility. The organisers have used a "drag and drop" page builder but it has no editing ability for sub pages. The page they need to change has a small amount of content in the md-7 column but most of the text of the speaker bios is in the md-4 column and looks much too narrow.
They have asked me to use the "Add custom CSS functionality" to adjust the width of the columns.
So my question is how to use ONLY CSS to increase the width of the third column.
I have tried the following:
.col-12.col-md-7 { max-width:30%; }
.col-12.col-md-4 { flex-grow:5 !important; }
.col-12.col-md-4 { max-width:70% !important; }
and it expands the third column nicely on a regular screen but falls apart on mobile as the 30% width is too small for the first column.
..and it expands the third column nicely on a regular screen but falls
apart on mobile as the 30% width is too small for the first column.
Perhaps I misunderstand the problem, but can you not just use media queries? BS4 use among other media queries these definitions (your CSS included) :
#media (min-width: 1200px) {
.col-12.col-md-7 { max-width:30%; }
.col-12.col-md-4 { flex-grow:5 !important; }
.col-12.col-md-4 { max-width:70% !important; }
}
#media (min-width: 576px) {
.col-12.col-md-7 { max-width: 60%; } /* perhaps 60% fits better */
.col-12.col-md-4 { flex-grow:5 !important; } /* change other classes accordingly */
.col-12.col-md-4 { max-width:70% !important; }
}
if you don't want to use inline css, you can define a class for all columns separately. You can then select and replace any column with css. This method is a bit laborious. If you want it to change in mobile view, you have to use #media
so you have to use this method and arrange each one individually in whatever size you want it to look like.
Html:
<div class="col-12 col-md-7 my-col1">column md-7</div>
<div class="col-12 col-md-1 my-col2">spacer md-1</div>
<div class="col-12 col-md-4 my-col3">column md-4</div>
Css:
.my-col3 {
// what if you want to
}
If you want to solve the size problem using only bootstrap other than css, you need to look at the column properties in more detail. You can specify how much space to take up in what size, so you don't have to add css properties. When you do this, you can also adjust the mobile and tablet appearance by taking advantage of the bootstrap responsive features.
in short, it would be a more logical move to adjust the responsive according to the column dimensions.
You can wrap the whole thing inside a container-fluid and then define a new class for every column. Then change the width of the column in css and use #media query to define the transformation in media breakpoints.

With Bootrap how can use two different col-sm-* classes on two different Media Queries?

In my application I have two different Small size Media Queries
#media only screen and (min-width : 480px) and #media only screen and (min-width : 320px)
But I want the 320px width to use the col-xs-12 and size 480px with col-sx-6 class?
Here is my HTML
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" id="buttonCol">
<div class="frame">
<div id="buttonWrapper1">
<div id="overlay2">
<img src="img/enter-01.png" id="enterButton" >
</div>
</div>
</div>
</div>
Is this possible and if so how can I do this?
You can create the div twice as shown below with different id's and hide the one which you dont want to show in the media query using
display:none;
#media only screen and (min-width : 480px)
#buttoncol320{
display:none;
}
#media only screen and (min-width : 320px)
#buttoncol480{
display:none;
}
<div class="col-xs-12" id="buttonCol320">
</div>
<div class="col-sx-6" id="buttonCol480">
</div>
Hope this gives want you want!
That's possible but goes a bit outside of the purpose of using bootstrap grid layouts. You just need to overwrite the css rules. Copy the rules from the bootstrap stylesheet and paste them in your own stylesheet in the right media queries making the desired adjusments.
Note: If you're aiming at having different breakpoints in your media queries I would advise you not to use bootstrap's grid but to make your own. You can import just the necessary features of the framework that suit your needs.

Changing class style on smaller screen in boostrap 3?

I am trying sothing with class called .text-center in \boostrap 3?
But i want only on smaller screen to add that to container element.
Tried something like this
col-sm-text-center col-xs-text-center
But does not work ok, is it possible to make it so simple?
Here is the code that is not working
<div class="col-md-6 col-sm-text-center col-xs-text-center">
<h2 class="color-brand">Lorem Ipsum</h2>
<p class="color-grey">Lorem ispums dolor sit</p>
</div>
It doesn't work this way. Css prefixes (.col-xs-, .col-sm- etc ) in bootstrap 3 are only for defining what column size will be for different screen sizes while alignment classes are what it is - classes for aligning text within a block.
You could probably use just css3 media queries for that like:
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) {
.my-fancy-block {
text-align:center;
}
}

Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

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.

Resources