This question already has answers here:
How to center the image in bootstrap 4? [duplicate]
(3 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Centering the image in Bootstrap
(3 answers)
Closed 4 years ago.
I am trying to center an image on the page, but it only works for mobile screens because I put col-xs-12 for <img> tag. Is there any problem in this class:
col-md-6 col-xs-12 img-responsive text-center
I tried to put margin: 0 auto to <img> and to .pict div, but it doesn't work. Also, I've tried center-block class and text-center.
<div class="container" style="width: 100%">
<div class="pict" style="width: 100%">
<div class="img-pict" style="margin: 0 auto">
<img src="../img/CoverCNVol1No1.png" class="col-md-6 col-xs-12 img-responsive text-center">
</div>
</div>
</div>
The image is standing on the left side, it should be at the center of the screen.
The idea is using the bootstrap container classes col-md-6 and alike to size containers for the image for different screen sizes and put the img inside.
You can convert the image to inline element using display: inline-block; and use the bootstrap text-center class or text-align: center; on the container div.
Or you can leave the image as is (block element) and center it with margin: auto or bootstrap4 mx-auto on the container div.
Also have in mind that for horizontal centering you are setting the left and right margins to auto. Top and bottom can still be sized as you need them.
<div class="container" style="width: 100%;">
<div class="pict" style="width: 100%;">
<div style="margin: auto;" class="img-pict col-md-6 col-xs-12">
<img src="../img/CoverCNVol1No1.png" class="img-responsive" />
</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:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 5 years ago.
I have a full-page bootstrap layout, and on the first page I need something aligned to middle & bottom.
There is a background image (first div), and a darker layer on it (second div).
<div class="h-100 w-100">
<div class="h-100 w-100 text-center">
<div class="h-100 w-100 d-flex align-items-center">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 style="color:#000;">something</h1>
<a href="">
www.something.com
</a>
<p class="tto_cl">
<span style="font-size: 1.8rem;">123</span>
</p>
<span style="text-transform:uppercase; color:#000; letter-spacing: 4px; font-family: Arial;">456</span><br>
</div>
</div>
</div>
Jsfiddle:
https://jsfiddle.net/543r2dcs/2/
They are aligned center perfectly, but I need something to bottom.
I want the 456 to the bottom of the div, but this new flexbox system is unusual to me.
Bootstrap has a very handy .align-bottom class. You can read about it here
<span class="align-bottom">bottom</span>
Set the parent element position: relative then set the poisition for the element you want to be down the bottom to position: absolute then set its bottom to 0 bottom: 0 this will position it to the bottom of its parent container this might also break how you are centering the element so you will have to add left: 0 and right: 0
If you want it to be vertically centered, use my-auto margin y auto, which brings it to the 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.
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!
I have the following scenario:
I have a <div class="row"> and then I have another <div class="col-lg-3"> where I will be putting the picture of a profile of an user. The problem is that I would like to center that picture to be in the middle of the available space, so I would normally do this:
<div class="row">
<div class="col-lg-3 col-lg-offset-x">
<img src="..." class="..." alt="..." title="..." data-size="...">
</div>
</div>
What would be the x value on the class of the <div class="col-lg-3 col-lg-offset-x"> If I wanted to center that div? Anybody has any idea how to do that?
Duplicate of Center a column using Twitter Bootstrap 3
"You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class."