I am trying to center column's content. Does not look like it works for me. Here is my HTML:
<div> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> 11 Answers
Use:
<!-- unsupported by HTML5 --> <div align="center"> instead of
<div> You can also use bootstrap 3 css:
<!-- recommended method --> <div> Bootstrap 4 now has flex classes that will center the content:
<div> <div>some content</div> </div> Note that by default it will be x-axis unless flex-direction is column
[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> <div> // Image </div> </div> If you want to align the text inside the col just use text-center
<div> <div> // 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> <div> // for image and text </div> </div> 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> <div> <center> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </center> </div> </div> Option 2: CSS Text-Align
<div> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> If you wanted everything to constrain to the width of the column
<div> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> UPDATE - Using Bootstrap's text-center class
<div> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> FlexBox Method
<div> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> Bootstrap 4/Bootstrap 5, horizontal and vertical align contents using flex box
<div> <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="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div> <h1>Some text </h1> </div>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> <h3>Lorem ipsum.</h3> </div> 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> <div> <span>abc</span> </div> </div> This is a simple way.
<div> <div> <p>My text</p> </div> </div> The number 6 controls the width of the column.
0//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> <div> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div> 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 You can add float:none; margin:auto; styling to centerize column content.
If none of the above work (like in my case trying to center an input), I used Boostrap 4 offset:
<div> <div> <input type="text" placeholder="Search.."> </div> </div> 
