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;
}
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:
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
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.
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>