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;
}
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:
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;
}
This question already has answers here:
Bootstrap: How to center align content inside column? [duplicate]
(2 answers)
Closed 6 years ago.
I have this code:
<div class="article-quiz-content.container">
<div class="row">
<div class="col-xs-6.quiz-cols">
<div class="true-placeholder">
<a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
</div>
</div>
<div class=col-xs-6.quiz-cols">
<div class="false-placeholder">
<a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
</div>
</div>
</div>
</div>
Which leads to this:
I need those icons to be in the center of the columns.
Suggestions?
Just add class text-center to your columns (.col-xs-6)
Reference: https://getbootstrap.com/css/#type-alignment
EDIT: after you changed markup you need to add it to placeholder divs
You can do something like this in your css:
.quiz-cols{
text-align: center;
}
.amenitie_icon{
display: inline-block;
}
Inline-block element float to center if container has text-align: center
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
How can I can put inline the two divs in order to make a progress bar?
I want that no matter the width the divs they stay together in a single line
I am using bootstrap and I know that I can use the one there but in my case the one of bootstrap dont help for my project.
<div class="container">
<div class="col-xs-12 col-lg-4">
<div class="panel panel-chart">
<div class="panel-heading naranja">
<h3 class="panel-title">Panel</h3>
</div>
<div class="panel-body">
<p>Title</p>
<div class="col-xs-12 col-lg-12">
<div class="progress-line azul part-one" style="width:70%"></div>
<div class="progress-line amarillo part-two" style="width:30%"></div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/s5m9hb0g/
Make the parent of the two parts of the progress bar display:flex;. This will make both divs display on the same line.
.panel-body .col-xs-12{
display:flex;
}
JSFiddle
Use float: left; on .part-one, see this fiddle
.part-one{
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
float: left;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 5 div's as follows:
<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>
I want to place the first one (with centered class) on the top-center, and the second (with "left" text), third (with "center" text) and the fourth (with "right" text) in one row in the center right below the top. Lastly, the fifth (with centered class) in the bottom center below the line of 3 div's.
I tried but it was just a waste of time. Can you help me with css?
Like this?
div {
height: 200px;
display: border-box;
}
.centered {
margin: 0 auto;
width: 33.33%;
}
.row {
}
.row div {
width: 33.33%;
float: left;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>
you may want to use a framework with a grid such as Twitter Bootstrap: http://getbootstrap.com/ or Zurb Foundation: http://foundation.zurb.com/. These frameworks provide a 12 column grid to make div positioning easier to handle.
The following example is using twitter bootstraps grid to position div's in the manner you are speaking of:
<div class="container">
<div id="top" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
<div id="middle" class="row">
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
</div>
<div id="bottom" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
</div>
The "row" class will create a new row where the elements will be positioned sort of like hitting enter for a new line in a word document. the "col-md-2" is the bootstrap syntax for how many columns the element will take up out of the 12 column grid. Offsetting this column by 5 on both ends will subtract 10 from the number of columns and so the remaining two in the middle will be reserved for the element. This will position your div in the center. You mentioned that you wanted the second row divs to all be positioned together in the center. The code written above will give each div equal width to take up the whole length of the row across the screen. The container that is wrapped around the code will provide a padding around all of the content inside of it so it will not touch the edges of the window. I hope this helps.