This question already has answers here:
Bootstrap Fluid grid system with different height
(5 answers)
Bootstrap row with columns of different height
(3 answers)
Closed 5 years ago.
What I want to achieve using the grid system of Bootstrap 3 is the following:
Image what I imagine.
However, what I get with the normal row and col is the following:
This is what I get.
Is there a ways how I can make the first element of the second row fit exactly the first element of the first row by keeping the different heights and preferably by keeping the order of the elements.
Something like this?
https://codepen.io/anon/pen/RgBqNr
<div class="row">
<div class="col-xs-6">
<div style="background: red">
Hello<br/><br/><br/>
</div>
<div style="background: blue">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
</div>
<div class="col-xs-6">
<div style="background: cyan">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
<div style="background: red">
Hello<br/><br/><br/>
</div>
<div style="background: blue">
Hello<br/><br/><br/>
Again<br/><br/><br/>
</div>
</div>
</div><!--/row-->
Maybe you are trying to do something like an application named
Trello.
You can try that application first.
And you can do the styling with this reference : Trello CSS Guide
Related
This question already has answers here:
Nested rows with bootstrap grid system?
(2 answers)
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Bootstrap Rows and Columns - Do I need to use row?
(4 answers)
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 3 years ago.
I m trying to use a div with class col-sm-6 and trying to divide it again in 12 grids using col-sm-6 and col-sm-6 classes. However, it does not seem to work. col-sm-6 inside col-sm-6 is taking entire width of the parent and not sticking to 50% width as it should.
This pattern used to work well in Bootstrap 3 but does not seem to work in Bootstrap 4. I have code to prove it works in bootstrap3 but not in 4 below:
Bootstrap 3- It works: https://codepen.io/vishalgulati/pen/axMNRz
Bootstrap 4- It does not work - https://codepen.io/vishalgulati/pen/KYEzxr
Same code is used in both:
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<div class="col-sm-6" style="background-color:red;">25%</div>
<div class="col-sm-6" style="background-color:pink;">25%</div>
</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>
Bootrap 4 use "flex" styles. So you have two way:
1) You need to add
<div class="row">
before your first two divs with class col-sm-6 and close it after.
You can see your modified example: https://codepen.io/anon/pen/ZZPOEz
2) You need to add flex (display: flex;) to you first div on cols-sm-6, that contain two divs.
<div class="col-sm-6" style="display: flex;background-color:yellow;">
You can see your modified example: https://codepen.io/anon/pen/MRxeow
or add class 'row' to it - https://codepen.io/anon/pen/wZOWPO
<div class="col-sm-6 row" style="background-color:yellow;">
col will only works when it is the direct child of row. in your case, if the col is inside another col, it won't work. So you must wrap them with row. And since row has default margin of -15, you must wrap it with container. Check this.
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:red;">25%</div>
<div class="col-sm-6" style="background-color:pink;">25%</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>
This question already has answers here:
How do I add a margin between bootstrap columns without wrapping [duplicate]
(5 answers)
Closed 5 years ago.
I'm creating a card with html, css and bootstrap and I'm using the bootstrap class col to define the columns. My problem is when separating the divs, how is it possible to define 3 divs with col 4 and get a space between them without leaving the place? when I give a style of margin-left: 5px; for example, the third div goes to the bottom line
<div class="row">
<div class="col-xs-4">
<div class="card">...</div>
</div>
<div class="col-xs-4">
<div class="card">...</div>
</div>
<div class="col-xs-4">
<div class="card">...</div>
</div>
</div>
And:
.card {
margin: 0 5px;
}
This question already has answers here:
Set space between divs
(4 answers)
Closed 5 years ago.
I have defined a section in HTML file with two divs next to one another as follows:
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
How to add space between two horizontal divs in the HTML file?
from your snippet it seems you are using bootstrap, if this is the case then you can add space between two horizontal divs in bootstrap as follow:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
where: col-ms-offset-{value}. add space (as specified) to the left of the div. and you should remember that the size of all divs including offsets, must sum to 12 in bootstrap grid system as the above example.
if you want to space two divs you can do the following:
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">A</div>
<div class="col-sm-4">B</div>
</div>
</div>
CSS
.col-sm-4 {
margin: 0 5px;
}
I have 3 rows in my webpage using bootstraps grid. The first row has 3 divs of equal width while the next two rows have 2 divs of the same width left aligned. However, the last div of the first row is longer than the first two divs and I want it to overflow into the second row. How would I do this?
I have a link here of what I mean: http://imgur.com/a/mxnaH
You would have to separate the page in example "content-left, content-right". Bootstrap isn't supposed to be used to have rows overflow in to another. So if you give content-left a width of like 8, and content-right 4. That way you can have different heights and make it seem like it's overflowing
Try this grid:
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>
This question already has answers here:
Differences between container, row and span in Bootstrap
(3 answers)
Closed 6 years ago.
My bootstrap rows have negative margin and it is messing up my page (I can scroll horizontally which shouldn't happen). Do bootstrap rows always need to have a container as their parent? How do I stop this problem? I run into it a lot.
How would I format this properly?
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row row-one">
...stuff...
</div>
<div class="row row-two">
...stuff...
</div>
</div>
<div class="col-md-4>
...stuff...
</div>
</div>
</div>
Would it be?
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="container"> ** CONTAINER HERE? **
<div class="row row-one">
...stuff...
</div>
<div class="row row-two">
...stuff...
</div>
</div>
</div>
<div class="col-md-4>
...stuff...
</div>
</div>
</div>
Generally bootstrap row always have -15px margin and container have 15px padding along both left and right side. If you use container and row then the sum of this will be zero and you will get rid of this kind of problem. Read grid system from bootstrap documentation.
I think you should read this Documentation from that you can get a clear idea how the boostrap layout works. There is way to use boostrap frame work, to get good out come you have to use certain css in the way they have mention.