How to make bootstrap separate add a row responsively. Maybe it is better draw it :D.
So here is what i have:
And here is what i want to end up with:
My html i like this but i know it doesnt work since it separates the first and the 2nd row into 2 rows (1st row 2 columns and 2nd row 1 column with the size of 6). So how to make this work,since i just started learning bootstrap today :)
My html
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
Would making all the columns child of a single .row work for you?
<div class="row">
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
</div>
I don't think it would be easy/practical to make new rows like you want.
If you want the rows only for styling purposes you are better off using css and determine different styles when the layout changes
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I'm struggling right now with the order of the columns and rows of a bootstrap layout and I'm wondering if what I'm trying to do is even possible using bootrsap's rows/columns grid system.
So, I have the following layout for large devices:
And I want the columns to be reoredered on small devices like this:
Problem is... I have this "column 2" and I can't break it in two parts :D
Is there another way to achieve the same kind of layot using bootstrap?
Thanks in advance!
Edit
So, the large devices layout would be something like the this:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8">
<div>
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
<div class="row">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
See it on codepen: https://codepen.io/lucas-labs/pen/yLLeVxO
To change the column order, the columns must share the same parent. The only way to get this to work in Bootstrap 4 would be to disable the flexbox on lg and use floats.
<div class="container-fluid">
<div class="row mainrow d-lg-block d-flex overflow-auto">
<div class="col-12 col-lg-8 first-column float-left">
<div class="big-data-table">
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right order-first">
<div class="row myrow">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right">
<div class="row myrow">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/V9eB4jUNhw
SO I'm dusting up on bootstrap atm, and decided as a practice to create some grids with offsets.
I have no idea what's going on.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3
</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
These should make it three rows, first with a space in between the div's, etc
but it's just not working.
Any elucidation as to why would be appreciated. I append codepen link below.
https://codepen.io/anon/pen/QgXPae
Use
<div class="col-md-4 col-md-offset-4">.col-md-4 .offset-md-4</div>
it should be col-md-offset-3
you can see the documentation of grid in this link
[offsets][1]http://getbootstrap.com/css/#grid
I would like the fields of my form to be placed differently on desktop and on tablet. For now, everything is fine on desktop. I have two similar cases. In the first one, I have something like this (the input fields are in the div's) :
<div class="row">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
It doesn't look bad on tablets, but instead of having only one field in the 3rd and 6th rows, I would like to have two. Should I use just one "row" instead of 2, and use empty "col-md-3" 's on desktop in order to have a single "row" going across multiple lines?
In the end I have a similar case :
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
I would like the two first fields to be on the same line.
Thanks
Yes, put them all in a single .row element. This is known as column wrapping.
Demo: http://www.codeply.com/go/7mUSsbO8od
From the Bootstrap docs:
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"
There are also examples in the docs that demonstrate column wrapping. Just remember you may need to use responsive resets, if the columns vary in height.
You mean like this?
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="col-md-6 col-sm-6"></div>
<div class="col-md-6 col-sm-6"></div>
<div class="col-md-12 col-sm-6"></div>
</div>
</div>
I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
According to Bootstrap docs:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
For example, I have:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
And the last column is behaving what I thought would be incorrect according to the docs. When you resize the viewport in the following example here, you can see that the 7th column has irregular behavior for small viewports. The column seems to fill the width/height of the parent element.
Is there an out-of-the-box way to fix this with bootstrap? Feel like I'm overlooking markup but I'm going cross-eyed at the moment...
I think your problem has to do with the fact the col-*-12 bootstrap classes don't float.
You can either add a float: left to your 7th column with col-sm-12 or you can add a clearfix before the col only visible at the breakpoint where it becomes 12 (sm).
like this:
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
you can see this fiddle
but doing this might be cleaner:
<div class="col-xs-12 col-md-4 pull-left">
Col 7
</div>
here is a demo of that solution.
You can run into a lot of issues when overloading rows, so its usually recommended to avoid it as much as you can and wrap things in .rows.