I have a simple bootstrap row with two columns:
<div class="row">
<div class="col-md-5 col-md-push-7">
This should show on right
</div>
<div class="col-md-7 col-md-pull-5">
This should show on left
</div>
</div>
I want the first row to show on the right and the second row on the left. All of this works, however when the screen size becomes small or extra small, the first column shows up first and second shows up second.
I would like to display second column first and first column second on small and extra small devices. I tried to achieve this with pull-right and pull-left classes but it did not work.
Would appreciate your suggestions.
P.S. I want the divs to stack
Something like this might work if you want the horizontal column ordering reversed:
<div class="row">
<div class="col-xs-5 col-sm-push-7">
This should show on right
</div>
<div class="col-xs-7 col-sm-pull-5">
This should show on left
</div>
</div>
Here is a JSFiddle demo.
If you do want these to stack rather than being side by side like the comments are talking about.
And if you want the second dive to show on top of the stack then you would do it something like this. Show and hide to swap between divs/blocks.
Here is a Fiddle I set the media breakpoints low at 320px.
<div class="row showhide1">
<div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
This should show on right on larger views
</div>
<div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
This should show on left on larger views
</div>
</div>
<div class="row showhide2">
<div class="col-xs-12 bg-primary">
Was on right, now on top on smaller views
</div>
<div class="col-xs-12 bg-info">
This should show on left on smaller views
</div>
</div>
Related
Im using Bootstrap 3, I have 2 columns next to each other, but i want to make the right column shift underneath the left column when the screen gets smaller.
What I have is as follows;
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-8">
This is the left column
</div>
<div class="col-xs-4">
This is the right column
</div>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated :)
The reason is doesn't shift when the screen gets smaller is because you are using col-xs- classes. That tells bootstrap to show them next to each other on the smallest screen, and anything larger.
Also, you don't need the extra row for what you're doing.
Here's how you would show them next to each other on any screen medium or larger using col-md- classes:
<div class="container">
<div class="row">
<div class="col-md-8">
This is the left column
</div>
<div class="col-md-4">
This is the right column
</div>
</div>
</div>
If you wanted to show them next to each other on a large screen and stacked on anything smaller, you would use col-lg- classes.
I can't seem to get this well to align with the center of the page. It seems like it should be easy but I can't figure it out.
You can use offset classes provided by Bootstrap
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="well">
Content
</div>
</div>
</div>
</div>
CODEPEN
Bootstrap is based on a grid system of 12 columns. If you want the above message submission box centered I would place it in a column space of ~6 and have ~3 columns on each side of it like this:
<div class="row">
<div class="col-xs-3">[Empty DIV]</div>
<div class="col-xs-6">[Summision Box]</div>
<div class="col-xs-3">[Empty DIV]</div>
</div>
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
I'm having an issue where the height of one of my panels increases dramatically when I reduce the window size. Specifically, I have two panels in one row - one is col-grid-5 and the other is col-grid-4. The col-grid-4 header height (2nd one below AKA Recent Active Projects) is the one that is increasing way more than it should. Here's a plunkr:
http://plnkr.co/edit/NfI2xjth4ZU02duwLKDv
<div class="col-md-5">
<div class="panel">
....
</div>
</div>
<div class="col-md-4">
<div class="panel">
....
</div>
</div>
If you resize the window of the plunkr, you'll see it happen during a certain window width range. The problem goes away if I reorder the tables (i.e. put the 2nd one first). However, I can't figure out why that works.
Any tips would be great!
This is a float clearing issue. You need to include another .row tag around your nested .col-sm-6's. Simple answer is that any time you have a group of columns in bootstrap, you need a row around them.
<div class="col-md-5">
<div class="panel">
<div class="panel-heading no-border bg-primary">
<span class="text-lt">Time Summary</span>
</div>
<div class="row">
<div class="panel m-n col-sm-6 padder-v">
Hours Today
<i class="icon-arrow-right pull-right m-t-lg"></i>
<div class="h2 b-b m-t-sm">2.50 </div>
</div>
...
</div>
</div>
</div>
Updated plunker: http://plnkr.co/edit/rQqusAmUEWFrKMEqxRmz?p=preview
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.