Changing class style on smaller screen in boostrap 3? - css

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;
}
}

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>

Force Bootstrap 4 breakpoint (for preview) by class

Bootstrap 4 CSS uses media queries to get current screen size and display elements in the style of according device (screen width).
But what if I want to show preview of mobile markup on wide screen?
I want something like adding some class "preview-sm":
<div class="preview-sm">
<div class="container">
<div class="row">
...
</div>
</div>
</div>
so all Bootstrap 4 media queries will be overrided by breakpoint I specify in this class.
Is this possible?
Or maybe there is another way to show preview in Bootstrap?
You can break styles by class like that:
.preview-sm .container {
width: 1000px !important;
}
But #media always based on screen size.

How can I display a different layout with bootstrap 3?

I am trying to display a different layout for my mobile views. In the desktop view using the grid system I have 4 columns each with 2 columns an image and a label+value. In mobile I want to skip the image column and for the label and value I want them next to eachother so something like:
This is a label : this is a span.
1 column in the desktop version looks something like this:
<div class="col-md-3">
<div class="col-md-2">
<p>col-md-4</p>
</div>
<div class="col-md-10">
<div>This is a label</div>
<span>This is a span</span>
</div>
</div>
I tried to use col-sm-3 but it still displays in the desktop? How can I get the mobile view with the label and value next to eachother?
See also:codepen
you can use bootstrap css class :
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
Using a media queries you can change the attributes of elements/classes/IDs based on screen size. You may be particularly interested in using display: none; as follows:
CSS
/*For smartphone and small devices*/
#media only screen and (min-width: 480px) {
.hide-me {
display: none;
}
}
/*For tablet sized devices and larger*/
#media only screen and (min-width: 748px) {
.hide-me {
display: block;
}
}
Of course you can double up the functionality of col-xs-3 (or any of your choosing) but using that as your class selector in the media query.
#media only screen and (min-width: 748px) {
.col-xs-3 {
display: block;
}
}
Check out some standard documentation responsive design - especially those provided by Twitter! Mobile first is common, where you start with the smaller media queries then get bigger.
http://getbootstrap.com/css/

downsize width and margin-top

Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!

How does Bootstrap switch from one class to the next?

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.

Resources