This question already has answers here:
Vertically aligning an image to the bottom inside a bootstrap “column”?
(1 answer)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?
JSFIDDEL
HTML:
<div class="row">
<div class="col-xs-2">
<img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
<img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
<img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>
CSS:
.row {
border-bottom: 1px solid red;
position: relative;
}
.first {
}
.second {
}
.third {
}
The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.
For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.
style='margin_top:150px;'
Related
This question already has answers here:
Vertical alignment of column rows in Bootstrap grid
(2 answers)
Closed 4 years ago.
I have a really basic html structure that has a single row split in to two even columns. I have two equally sized images and require one to be horizontally and vertically centred in each column.
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="example.png" />
</div>
<div class="col-md-6">
<img src="example.png" />
</div>
</div>
</div>
A wireframe of how the pages should look is as follows:
I thought this could be achieved through bootstraps centre classes. I have also tried custom css using flexbox. I feel I am missing something as I expected this to be fairly simple but my images float at the top of the page.
Layout them as a table in CSS
.container .row {
display: table;
width: 100%;
}
.container .col-md-6 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Taken from https://css-tricks.com/centering-in-the-unknown/
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: 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;
}
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm trying to vertically (and horizontally) center a div (height and width unknown) in a Bootstrap column. I can horizontally center the div by setting text-align to center. However I am struggling to vertically center the div. Here is a snippet of my code:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div style="text-align: center"> <!--this works-->
<p>Content goes here</p>
</div>
</div>
</div>
Thanks in advance!
If you're using Twitter Bootstrap and you have the Bootstrap 3, they added <div class="center-block">...</div>.
Reference: Bootstrap v3.1.1.
You may want to give this a shot:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
<div class="Inner>
<p >Content goes here</p>
</div>
</div>
</div>
/* CSS Code */
.Outer {
border: 1px solid black; /* Just so you can see it centered vertically */
display: table-cell;
height: 100%;
min-height: 15em; /* Set to height you need */
}
.Inner > p {
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
Keep in mind that the browser will automatically recognize the resolution width;
however, the same functionality doesn't apply to height. You need to set a specified
height on the outer element in order for the inner content to have something to
vertically align itself to. Hope this helps!