'How to center content in a Bootstrap column?
I am trying to center column's content. Does not look like it works for me. Here is my HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Solution 1:[1]
Use:
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
instead of
<div class="col-xs-1 center-block">
You can also use bootstrap 3 css:
<!-- recommended method -->
<div class="col-xs-1 text-center">
Bootstrap 4 now has flex classes that will center the content:
<div class="d-flex justify-content-center">
<div>some content</div>
</div>
Note that by default it will be x-axis unless flex-direction is column
Solution 2:[2]
[Updated Apr 2022]: Tested and Included the 5.1 version of Bootstrap.
I know this question is old. And the question did not mention which version of Bootstrap he was using. So I'll assume the answer to this question is resolved.
If any of you (like me) stumbled upon this question and looking for answers using the current bootstrap 5.0 (2020) and 4.5 (2019) framework, then here's the solution.
Bootstrap 4.5, 5.0, and 5.1
Use d-flex justify-content-center on your column div. This will center everything inside that column.
<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>
If you want to align the text inside the col just use text-center
<div class="row">
<div class="col-4 text-center">
// text only
</div>
</div>
If you have text and image inside the column, you need to use d-flex justify-content-center and text-center.
<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>
Solution 3:[3]
Bootstrap naming conventions carry styles of their own, col-XS-1 refers to a column being 8.33% of the containing element wide. Your text, would most likely expand far beyond the specified width, and couldn't possible be centered within it. If you wanted it to constrain to the div, you could use something like css word-break.
For centering the content within an element large enough to expand beyond the text, you have two options.
Option 1: HTML Center Tag
<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>
Option 2: CSS Text-Align
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
If you wanted everything to constrain to the width of the column
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
UPDATE - Using Bootstrap's text-center class
<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
FlexBox Method
<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Solution 4:[4]
Bootstrap 4/Bootstrap 5, horizontal and vertical align contents using flex box
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
Use bootstrap class align-items-center and justify-content-center
.page-hero {
height: 200px;
background-color: grey;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>Solution 5:[5]
No need to complicate things. With Bootstrap 4, you can simply align items horizontally inside a column using the margin auto class my-auto
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>
Solution 6:[6]
Use text-center instead of center-block.
Or use center-block on the span element (I did the column wider so you can see the alignment better):
<div class="row">
<div class="col-xs-10" style="background-color:#123;">
<span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
</div>
</div>
Solution 7:[7]
This is a simple way.
<div class="row">
<div class="col-md-6 mx-auto">
<p>My text</p>
</div>
</div>
The number 6 controls the width of the column.
Solution 8:[8]
//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Solution 9:[9]
col-lg-4 col-md-6 col-sm-8 col-11 mx-auto
1. col-lg-4 ? 1200px (popular 1366, 1600, 1920+)
2. col-md-6 ? 970px (popular 1024, 1200)
3. col-sm-8 ? 768px (popular 800, 768)
4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
5. mx-auto = always block center
Solution 10:[10]
You can add float:none; margin:auto; styling to centerize column content.
Solution 11:[11]
If none of the above work (like in my case trying to center an input), I used Boostrap 4 offset:
<div class="row">
<div class="col-6 offset-3">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow