This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Vertically center element with Bootstrap 3
(1 answer)
vertical-align with Bootstrap 3
(26 answers)
Closed 5 years ago.
I have 2 bootstrap col-md-6 columns that one has an image in and the other has a p tag in it with a paragraph of text. how would i dynamically vertically align the text so its perfect compared to the image next to it, code below
<div class="col-md-6">
<img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
<p>text goes here</p>
</div>
i also need to be able to do the same thing with a column that may have 3 tags in it so a h3 p and an a tag.
If you are using V4 of bootstrap you can simply rely on some class utilities and use align-items-center to achieve this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row align-items-center">
<div class="col">
<img class="img-responsive" src="https://lorempixel.com/400/200/">
</div>
<div class="col">
<p>text goes here</p>
</div>
</div>
</div>
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:
How to vertically and horizontally center this text inside bootstrap4 columns? [duplicate]
(4 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Bootstrap 4, How do I center-align a button?
(10 answers)
Closed 5 years ago.
I have this column in my Bootstrap grid:
<div class=col-sm-2>
<div class="w-75 mx-auto">
<br><a class='button btn btn-outline-dark' href='{% url "elections:new_post" %}'>New Post</a><br><br>
<a class='button btn btn-outline-dark' href='{% url "elections:new_image" %}'>New Image</a><br><br>
<div class='card'>
<div class='card-body'>
<p>Test</p>
</div>
</div>
</div>
</div>
Because of the mx-auto, I would expect everything within those div tags to be centered, but the buttons are anchored to the left margin, as is the card and the text within the card.
How do I center the buttons and the card?
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