I have a bootstrap 3.0 page that is divided like 9 cols on the left and 3 cols on the right now. What I want is to hide 3 right cols when screen size is less than 768. This is my code structure:
<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs">
<div id="column_right">
//php stuff goes here
</div>
<div>
CSS is default bootstrap 3.0, but the problem is that when I go to small screen size like mobiles the right 3 cols are still visible. What's wrong with it?
Your markup pretty much works as it stands now. Here's a bootply [adding in your left column]
http://www.bootply.com/FYLVttbyUH
Here's the code in case bootply is not available:
<div class="col-md-9 col-sm-6 col-xs-12 red">
<div id="column_left">
<span>This is always shown</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs blue">
<div id="column_right">
<span>This should be hidden on mobile devices</span>
</div>
<div>
</div></div>
<div id="push"></div>
Your code doesn't include 2 columns.
Maybe what you want is something like this?
<div class="row">
<div class="col-md-9 col-sm-6 col-xs-12">
<!-- persistent column -->
</div>
<div class="col-md-3 col-sm-6 hidden-xs">
<div class="row">
<div id="column_right">
//php stuff goes here
</div>
</div>
</div>
<div>
Related
I have such code:
<div class="row inner">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>image is here...</h1>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
</div>
and so it looks like on mobile:
link
but i need that my second column appears on the top on mobile (not on the bottom)...
can i achieve it somehow without changing html code?
plunker: https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview
If using bootstrap why not just add push and pull classes? If you do not want to modify the markup you could do this javascript also. Why would you not want to modify the markup?
<div class="row inner">
<div class="col-md-6 col-md-push-6">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<h1>image is here...</h1>
</div>
</div>
edit
Also, If you want to right align something in bootstrap for a particular media query add it to the stylesheet. So on mobile it would be text-align: right and on your next media to reset it you can add text-align: left
I have been reading a lot of questions and answers here about swapping, rearranging and replacing divs using bootstrap, but I couldn't solve my problem.
I have two divs that contain more divs in it.
One div(A) is on the right side and another on the left(B).
In desktop and tablet view they are set one next to another AB.
When on mobile view I want A to be under B.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
A
</div>
<div class="col-md-6 col-sm-6">
B
</div>
</div>
</div>
I have tried with pull and push but it didn't work.
Any help will be appreciated. Thanks
Here is one solution that did the trick for me:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6 col-push-6">
Content B
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-pull-6">
Content A
</div>
</div>
</div>
SEE WORKING EXAMPLE HERE
Read more on Bootstrap ordering here
You can use a trick by visible class:
<div class="row">
<div class="col-md-6 col-sm-6 visible-lg visible-md">
A (Visible-lg & md)
</div>
<div class="col-md-6 col-sm-6">
B
</div>
<div class="col-md-6 col-sm-6 visible-sm visible-xs">
A (Visible-sm & xs)
</div>
</div>
I am trying to build a mobile-first header. I have a single div class="row" with 4 columns on a single line for viewports of md, lg, but when the viewport drops to sm, xs I push 2 columns to a new row, and at this point the row and/or fluid-container does not resize (grow in height) causing a cut-off that only shows the top two columns.
Is there a way to prevent this, or to tell Bootstrap 3's row or container to grow?
Customer and total are cut off on xs and sm views, the gray area is a new div with the main page's content:
<div class="container-fluid">
<div class="row">
<!-- Sales Order # -->
<div class="col-xs-6 col-md-2 sp-sales-order">
<div ng-controller="tabTitleCtrl">
<div class="sp-header-text">
{{subtitle}}
</div>
<div>
{{title}}
</div>
</div>
</div>
<!-- Button Block -->
<div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
<div ng-include="toolbarPath">
</div>
</div>
<!-- Totals -->
<div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
<div class="row">
<div class="col-sm-12 sp-header-text">
Total
</div>
<div class="col-sm-12">
{{Total | currency}}
</div>
</div>
</div>
<!-- Customer Input Box -->
<div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
<div ng-include="headerPath"></div>
</div>
</div>
</div>
Try this. I built it from scratch to get away from the extra classes in your code so you could clearly see what's going on. I'm basically just relying on Bootstrap to stack the cols for me at different display widths - without overdoing the classes.
I think this is what you're going for.
Here's a Fiddle
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
Invoice
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<button class="btn btn-default">Void</button>
<button class="btn btn-default">Post</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<select class="form-control">
</select>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
Totals
</div>
</div>
</div>
I need to just set an offset col-sm-offset-1 and this is also affecting md and lg devices as well even after setting their offsets to too.
I don't know what is causing this.
<div class="container">
<div class="row">
<div class="col-md-4 hidden-xs hidden-sm">
Some html here...
</div>
<div class="col-md-5 col-sm-7 col-sm-offset-1 col-md-offset-0 col-lg-offset-0">
Some html here...
</div>
<div class="col-md-3 col-sm-4">
Some html here...
</div>
</div><!-- end of row div -->
</div>
The offset applies from sm all the way up to max size. That is the point of Bootstraps mobile first approach.
You could try adding col-md-offset-0 to prevent the offset applying to larger sizes.
You code works as intended, but perhaps you are mistaking the margins for an offset? If you want the content to stretch out and fill the page, replace container by container-fluid, like so.
<div class="container-fluid">
<div class="row">
<div class="col-md-4 hidden-xs hidden-sm">
Some html here...
</div>
<div class="col-md-5 col-sm-7 col-sm-offset-1 col-md-offset-0 col-lg-offset-0">
Some html here...
</div>
<div class="col-md-3 col-sm-4">
Some html here...
</div>
</div><!-- end of row div -->
</div>
I was creating a template today using bootstrap. suddenly My grids are not getting any margin between them.
my markup are pretty simple:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
<p>flacon</p>
</div>
</div>
</div>
I didn't face anything like it before. please help me.
There is no margins between the columns in bootstrap but there is padding. When you set the background-color to white, that creates a background for the padding too which is why it looks continuous and not separated.
Add this:
<div class="col-sm-3">
<div class="white-box">
...
</div>
</div>
With .white-box whatever you want such as background-color: white;
The Bootstrap grid-system does not add any margins - instead it adds a padding inside the columns. You could build something like this:
<div class="container" div style="margin-top:50px;margin-bottom:50px">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 box">
<p>flacon</p>
</div>
</div>
</div>
</div>
I also removed your many col-XX-3 classes as stated in my comment. For mor details see Bootstrap documentation
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.