Most grid layout examples in Bootstrap 4 put columns inside rows. Is it wrong to put rows inside columns ? Like this,
<div class="col col-md-6">
<div class="row">
</div>
</div>
Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<!-- Your content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's a perfectly valid approach. Consider the example below:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
The [x]-col-[y] classes are all percentage based for widths. Go nuts with the nesting! Just make sure you wrap them in a row div else you'll get some funky margins
Related
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
I am trying to clarify this doubt, but on the documentation on bootstrap 4 isn't specified.
What is the difference between these two snippet:
<div class="container">
<div class="row">
<div class="col-12">col-12</div>
</div>
<div class="row">
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
And, just using a single .row:
<div class="container">
<div class="row">
<div class="col-12">col-12</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
That is: adding a specific new .row, or simply adding a col-12 ?
If you add more than col-12 to a row, bootstrap system simply breaks after col-12 in your example.
<div class="container">
<div class="row">
<div class="col-12">col-12</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
Writing like this is totally fine.
I have 4 columns like this
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>
Normally it looks like this:
[3][1][4][4]
When it's in smaller viewport, I want it to show like this:
[4]
[4]
[3]
[1]
I have tried
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-8"> col3</div>
<div class="col-md-1 col-md-push-8"> col1</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
</div>
</div>
It shows:
In large viewport:
[4][4][3][1]
In viewport that those columns collapse:
[3][1][4][4]
But it seems like what I did is completely reversed...
A created a codepen snippet http://codepen.io/ngp130895/pen/Kzxdpj
How can I achieve this?
you may get the solution in this link
I found a workaround for this. This looks kinda stupid but it works.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-3 col-md-pull-8"> col3</div>
<div class="col-md-1 col-md-pull-8"> col1</div>
</div>
</div>
Edit: I found that this actually the correct way. Mobile view should be written by default and larger viewport is modified by pushing and pulling the columns.
Div is an element block and every new div go to the head of the line.
For fix this problem have two way:
Use tag
Use a code CSS for do became tag inline
For the first way you must only change tag <div> with <span.
For the last way you can use it:
div.container > div.row > div {
display: inline;
}
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>
Can't figure out why the columns aren't being structured with this HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
Try this:
DEMO
<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="image.png" />
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
</div>
You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.
A simpler way would be
<div class="container">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :
Here is the Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"> About
</div>
<div class="col-md-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
</div>
<div class="col-md-4"> SHARE
</div>
</div>
</div>
</div>
</div>
Refer the Bootstrap example description for the same:
http://getbootstrap.com/css/
Nesting columns
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
Here is the working Fiddle of your code: http://jsfiddle.net/52j6avkb/1/embedded/result/
While this does not address the OP's question, I had trouble with my bootstrap rows / columns while trying to use them in conjunction with Kendo ListView (even with the bootstrap-kendo css).
Adding the following css fixed the problem for me:
#myListView.k-widget, #catalog-items.k-widget * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Have you checked that those classes are present in the CSS?
Are you using twitter-bootstrap-rails gem?
It still uses Bootstrap 2.X version and those are Bootstrap 3.X classes. The CSS grid changed since.
You can switch to the bootstrap3 branch of the gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3 or include boostrap in an alternative way.
Make sure that you have linked the CDN link.
//Latest version v5
<div class="col-md-12"> // This line is optional.
<div class="col-md-4"> // Start from here.
About
</div>
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>