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;
}
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 4 years ago.
I'm working on the Free code camp project, but I've hit a snag. I cannot get the paragraph text below the image to center. I have the set to grid 4.
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="col-xs-12">
<h1 class="text-center text-uppercase">Bernie Sanders</h1>
<em><h2 class="text-center">"The man who stands for the people"</h2></em>
<img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
<div class="col-xs-4 col-md-4">
<h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
<ul class="text-justify small" id="list">
...
https://codepen.io/thehiddencheese/pen/WMWJeW
First wrap your grid 4 to the .row and use bootstrap [Flex Utilities] .justify-content-center class to that row like
<div class="row justify-content-center">
<div class="col-sm-4"></div>
</div>
Another solution will be to use [offset] classes like
<div class="row">
<div class="col-sm-4 offset-sm-4"></div>
</div>
You can use text-align: center for the div <div class="col-xs-4 col-md-4"> then the paragraph text will be aligned to the center of the page below the image.
But, it's looking odd with the bullet points and text aligned to center. If you are aligning it to the center I suggest going without bullets :).
Below is the div tag you can use.
<div class="col-xs-4 col-md-4" style=" text-align: center;">
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;
}
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:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
I'm trying to get the content in <div class="col-md-2 col-lg-2"> in the middle to align to middle, but to no avail.
I know that setting the columns to a size of 2 will not fill the space of the grid system of 12 columns, but I want it to be aligned to the middle regardless.
<div class="row">
<div class="col-lg-12">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>
found a css trick that works
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
Bootstrap 4, like Bootstrap 3, uses offset to move or center entire columns. So in your case use offset-*-4 to move it over 4 cols in the 12 col grid.
<div class="row">
<div class="col-lg-12 text-xs-center">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>
</div>
To center inline elements (like text), use:
text-center (this was text-center in 3.x)
To center block elements (like DIV) or columns, use:
mx-auto (this was center-block in 3.x)
Demo: http://www.codeply.com/go/Wxzbd3a6og
There are also new responsive alignment classes in Bootstrap 4 so you can align differently at various breakpoints.