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.
Related
I have a two column bootstrap page as shown below. The left contains two rows (an image and a bordered bit of text below the image that fills the whole column width), the right is login details.
The image is 700px wide, and for smaller devices or screen widths I change to a smaller image. This all works fine. However when I resize the browser the right login column overlaps the left column's 700px image by about 40 pixels before it snaps to a single column.
I tried to fix this by putting in a minimum width for the left hand column like this:
<div class="col-md-8" style="min-width: 768px">
Which worked and it snapped correctly, however on doing so the left hand side main bordered text (that is a row below this image) then became fixed width and did not resize.
How can I get it so the two columns do not overlap and the text still flows in my bordered text.
thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<DIV class="row">
<div class="col-md-12">
<img class="loginPic hidden-xs" src="images/pic.png" >
<img class="loginPic visible-xs" src="images/pic-small.png" >
</DIV>
</div>
<br />
<DIV class="row">
<div class="col-md-12">
<div style="border: 1px solid #00549d; border-radius:10px;">
<div style="padding:20px;font-size: 13px;">
<p>Lots of text.</p>
</div>
</div>
</div>
</DIV>
</div>
<div class="col-md-4 pull-left" >login stuff here</div>
</div>
</div>
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>
Sorry for the really confusing title. What I'm trying to do should be quite easy in theory.
I think the best way to demontrate it is by showing you an image:
1 row at the top with 2 columns, and every other column coming after that should be positioned under the second column...
Is this doable?
Thanks
That's what the "offset" classes are for. col-md-offset-1 applied to the elements in the second column (as additional class) should do what you want (for medium viewport size)
(probably you use wider columns with classes like col-md-3 that span three columns of the grid. In this case you'd need col-md-offset-3for the offset)
use col-md-offset-* class
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
for more information :
Bootstrap Grid System - Bootstrap Grid Examples -
Try HTML display : flex for such layout. For example refer below link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
Try below code snippet.
<div class="row-fluid">
<div class="span4"><div class="well">1</div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
</div>
</div>
</div>
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>
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