I have 3 divs of 3, 3, 6 width in bootstrap. I want them to be horizontally aligned all the time except for the xs. I want the first 2 div's is one line and the last divs to come below them in small devices. How can I achieve it.
I'm guessing you want something like this:
<div class="row">
<div class="col-sm-3 col-xs-6"></div>
<div class="col-sm-3 col-xs-6"></div>
<div class="col-sm-6 col-xs-12"></div>
</div>
Related
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
I'm sure this has been answered many times - but I've searched here with no luck...
I'm new to bootstrap (and div tags)... Here's what I've spent all day trying to figure out... I have 2 rows. The 1st row has 3 columns (1,2,3). The 2nd has 2 columns (4,5) . I'm trying to simply "allow" column "3" to extend into and beside column "5" - currently column 4 & 5 get pushed down below the end of 3...
Column "3" may contain an article or contact form - not sure yet- either way I need the flexibility...
I have successfully done this by nesting 4 into 1 & 5 into 2... but when I view in mobile view column 3 gets pushed to the end of section5... I want 3 to remain number 3 in the mobile vertical view list..
Does Bootstrap have something built into CSS to accomodate?
Are multiple 'containers' required?
I'd rather not add CSS, but if that's the only way so be it... Thanks!
My code:
<div class="row-fluid">
<div class="col-md-4">
<h2>section1 </h2>
</div>
<div class="col-md-4">
<h2>section2 </h2>
</div>
<div class="col-md-4">
<h2>section3 </h2>
</div>
</div>
<div class="row-fluid">
<div class="col-md-4">section4</div>
<div class="col-md-4">section5</div>
</div>
I believe this is what you're looking to accomplish:
Bootply
First, there is no .row-fluid class in Bootstrap 3. For this design, you'll need just a single .row and you'll use the helper class .pull-right on the section 3 element as follows:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 1</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 2</h2>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pull-right">
<h2>Section 3</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 4</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 5</h2>
</div>
</div>
</div>
</div>
</div>
So, what's going on here is that the col-* classes have float: left applied to them by default. That means that if you were to have very long content in the 3rd column, when the remaining two columns wrap, there would be a gap between them and the first two columns, equal to the height of the 3rd column. We can fix this by telling the third column to float right instead. That's what the class .pull-right does -- it applies float: right to the element on which it's used.
When the third column is floated to the right, the 4th and 5th columns can sit neatly right below the left floated columns 1 and 2 at the md and lg breakpoints (991px and up). At the sm and xs breakpoints though, the source order is honored and section 3 displays in the proper position below section 2 and above section 4.
Finally, using a single row allows all of the columns to wrap at 12-grid units.
**If your content is dynamic or uneven in length, you can use the technique shown in the Bootply of nesting columns 1 and 2 together in a single column, as well as columns 4 and 5.
If you're new to Bootstrap, I encourage you take a look at my answers here or here, to help you understand and visualize the grid better.
I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull
This question already has answers here:
Bootstrap 3: Push/pull columns only on smaller screen sizes
(2 answers)
Closed 8 years ago.
I have two columns in Twitter bootstrap, they look like this:
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
It scales down to full-width perfectly when on xs resolution, but I would like to swap those two columns with each other, so that the second column in the code would be the first column displayed and the first column in the code would be the second column displayed.
I tried using col-xs-pull-12 and col-xs-push-12 but it gave me weird results, columns were absolutely off grid. How can I swap them using bootstrap's classes? I want this to happen only on xs resolution.
You need to use pull and push on the right way .... That is for the larger devices:
Change the order of your markup exact the same you want on Mobile -- Mobile First
Add push and pull to change the order on larger devices
<div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
<div class="post">
Something here Now
</div>
</div>
<div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
Check this BottplyDemo
I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).