I've read that I can order my grid columns using https://getbootstrap.com/css/#grid-column-ordering, however, unfortunately, I cannot find a way to have "right column first" only in collapsed state.
Currently I have two columns "LEFT" (col-lg-4) and "RIGHT" (col-lg-8). I want the RIGHT column to collapse on top of the LEFT column, but stay on the right side if not collapsed.
How to?
For more recent Bootsrap versions you can use flex-column reverse and set the size at which reverse property happens (i.e. below flex-lg-row):
<div class="row flex-column-reverse flex-lg-row">
<div class="col-lg-4">
sidebar
</div>
<div class="col-lg-8">
main
</div>
</div>
There is a duplicate thread at:
How do I change Bootstrap 3 column order on mobile layout?
u can use order, set the first col with higher order (like 'order-md-3'), form md to high size window it will on right side because higher order, and the second col will on left because its not have order its same 0 order (the lower order will on left).
<div class="row">
<div class="col-md-5 order-md-3">
<img src="../img/profile/fotocv.png" alt="foto profile" width="100%">
</div>
<div class="col-md-7">
<div class="plang">
<h1>Hi!</h1>
<h1>I'M AMMARIDHO SIREGAR</h1>
<h3>Web Developer</h3>
</div>
</div>
</div>
add float: right to both and place the right one before the left one in the HTML code.
Related
In Bootstrap 5 - I have various pages, sometimes 2 columns, sometimes 3.
The template system I'm using tests for the need for the third column and adds it.
<div class="container pt-5">
<div class="row gx-5">
<div class="col-sm-12 order-2 order-md-1 col-md-3">
<!-- Left column content here -->
</div>
<div class="col-sm order-1 col-md-6">
<!-- Center column content here -->
</div>
<!-- an if statement goes here which I won't bother everyone with-->
<div class="col-sm-12 order-3 col-md-3">
<!-- Right column content here -->
</div>
<!-- the if statement ends here-->
</div>
</div>
This works just fine for a three column layout. But in the template that third column (right column) is sometimes (intentionally dropped). For this two column layout, this layout still works just fine except that the center column NOW needs to be col-md-9 instead of col-md-6.
I can make the template change this, so it's "operational", but I would like to stick with layout being fully handled by bootstrap, so to speak.
I thought well fine, col-md-auto and it should resize to whatever it needs.
If I put in "col-md-auto" in the place of "col-md-6" that center column skips to a new line.
I assume there is either a way to force to row so md-auto spans 9 like I would like it to in that case OR I'm totally missing something.
As always I much appreciate everyone's help.
Please let me know if I am missing anything.
With a few comments I received I realize I see I was unclear, with the above bootstrap classes, we get the small breakpoint giving the three columns stacked, with "center" on top, "right column" in the middle, and "left column" last.
Then for anything above "sm", it gives "left column" left, "center column" center, "right column" right
The only problem being when their is no left column (which is a valid condition for this site) the center, in sizes above "sm" needs to take up the remaining space (which would be col-9 when their is no right column, or col-6 when their is).
Just change <div class="col-sm order-1 col-md-6"> to <div class="col order-1">. Now this column will have auto width.
Whole code
<div class="container pt-5">
<div class="row gx-5 bg-primary">
<div class="col-sm-12 order-2 order-md-1 col-md-3 bg-warning">
<!-- Left column content here -->
</div>
<div class="col order-1 bg-info">
<!-- Center column content here -->
</div>
<!-- an if statement goes here which I won't bother everyone with-->
<div class="col-sm-12 order-3 col-md-3 bg-body">
<!-- Right column content here -->
</div>
<!-- the if statement ends here-->
</div>
</div>
In this case I was unable to resolve just using bootstrap.
I did need to put an if statement in the templating engine.
So my final code was, the templating engine creating different templates based on two or three column.
I believe my theory was flawed, that it would be better to put this towards bootstrap (in terms of dealing with 2 or 3 columns) when it was really a decision to be made by the templating engine to then generate a 2 column layout with x bootstrap code or three column.
Thank you for eveyones time.
I thought this would be the best way to close it.
The image in the 2nd column keeps stacking below the first column and not on the right side of the page. Ive been staring at this for two hours now. I'm using codepen so I have bootstrap preloaded in the background.
http://codepen.io/OfeyDofey/pen/KaLjeG/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>George Washington</h3><br>
<h3>Montana State Quarter</h3><br>
<h3>Ohio State Quarter</h3><br>
</div>
<div class="col-md-12">
<img src="http://i.imgur.com/YzO3IvA.jpg" class="QC">
</div>
</div>
</div>
</div>
You need to change col-md-12 to col-md-6.
Bootstrap grid works on 12 columns.
Found two bugs.
Grid system is 12 col wide, currently in your code it is 24 cols wide, use -6 instead of -12.
Add 'display:inline;' property to your 'h3{ }' in order to display them inline.
I'm new to Bootstrap and I came across this issue.
<div class="container row">
<div id="page" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="header"></div>
<div id="article"></div>
<div id="footer"></div>
</div>
<div class="col-lg-2 col-md-1"></div>
In boostrap documentation it shows that I dont have to use the last div.
doc: <div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
6 + 3 = 9. There are 3 col missing. I just want to make sure I understood this well before progressing into more details.
IF there are col missing inside a row will row automatically add them?
Or will I have some sort of a surprise bug at the long run.
I was using the 1200px grid system before. and I always had to add the the cols in correct order and correct numbers.
6+3= 9 & The remaining columns/grids i.e 3 columns space will remain empty, it won't give any bug, it just center align the DIV having class col-md-offset-3 by moving it 3 columns from left and 3 columns on right are empty so the DIV will be center aligned.
Hope this will bring some clarity, thanks.
First: Don't put class container and row in the same div.
Answer: If you start a new row it will start counting from zero again.
You could put all your sections in separate containers.
<div class='container'><!--this is your container-->
<div class='row'><!--this is your row-->
<div class='col-md-4 col-md-offset-3'><!--populating row with col with offset-->
</div>
</div>
<div class='row'>
<!--some other cols will start counting from zero because it is a new row-->
</div>
</div>
This is my html right now. Whenever I view it on a smaller screen, rather than appearing on the far right like it should according to the col, it appears in the center of the screen.
<div class='row visible-xs-block'>
<div class='col-xs-2 col-xs-offset-10'>
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
I'm looking for a way to fix this issue
Like it was suggested by Shawn, it's best to just use pull right and set your column the length you want instead of trying to play with an offset. Something like this should work perfectly:
<div class='row visible-xs-block'>
<div class='col-xs-12'>
<div class="pull-right">
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
</div>
I'm just starting with Bootstrap 3 and struggling to find a fluid (responsive) solution for the required grid.
Simplified it should look like the following
for desktop and tablets:
------------+---------------+-----------
Label 1.1 Label 2.1 Label 3.1
Label 1.2 Label 2.2 Label 3.2
for phones:
----------+----------
Label 3.1 Label 3.2
Label 2.1 Label 2.2
Label 1.1 Label 1.2
As you can see the components need to be stacked in 3 columns on a larger screens while forming 3 lines with 2 columns each on smaller ones.
I unsuccessfully tried three blocks with a pair of components in each like the one below. They are all wrapped into a container and a row.
<div class="col-md-4 ">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6">
<label>Label 1.1</label.1>
<label>Label 2.1</label>
</div>
</div>
I also tried to splitting each label into it's own <div class="col-sm-6"> and it didn't work for me as well.
On top of it (as you can see), the order needs to be reversed vertically. I was thinking about push and pull but they work horizontally.
Is it even possible with pure Bootstrap (no custom CSS). Am I missing something basic here? Please point me into the right direction.
EDIT: (03/26/2014)
I believe that I found a solution to a reverse ordering. Create sm layout with the appropriate order and then use push and pull to swap 1st and 3rd fields in each row in a horizontal layout on md and lg devices.
Still not sure how to achieve the desired layouts organically (i.e. without field duplication with visible and hidden classes).
Assuming I didn't miss anything, this matches your two layouts specified:
<div class='row'>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>3.1</div>
<div class='col-xs-6 col-sm-12'>3.2</div>
</div>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>2.1</div>
<div class='col-xs-6 col-sm-12'>2.2</div>
</div>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>1.1</div>
<div class='col-xs-6 col-sm-12'>1.2</div>
</div>
</div>
As you can see, you use the pull-right to make the top pull to the right, which essentially reverses the order when stacked.