how can I center my text in bootstrap?

Question

I have a plain html code:

    section.cta, section.cta2, section.cta3, section.cta4 {
      position: relative;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
      background-position: center;
      padding: 250px 0;
    }
    section.cta .cta-content, section.cta2 .cta2-content, section.cta3 .cta3-content,  section.cta4 .cta4-content {
      position: relative;
      z-index: 1;
    }
    section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
      margin-top: 0;
      margin-bottom: 25px;
      color: black;
      max-width: 450px;
      font-size: 50px;
    }
    
    section.cta .cta-content p  {
      color: black;
      max-width: 450px;
      font-size: 20px;
    }
    
    section.cta {
      background-image: url('https://cdn1.tnwcdn.com/files/2011/08/bliss.jpg');
    }
    
    @media (min-width: 768px) {
      section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
        font-size: 80px;
      }
    }
    section.cta .overlay {
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
    }

<section class="cta">
        <div class="cta-content">
            <div class="container">
                <h2>this is header</h2>
                <p>this is some other text.</p>
            </div>
        </div>
        <div class="overlay"></div>
    </section>

The result is a page with a nice background and a text aligned to the left.

Basically the text looks like this:

|   this is header                                   |
|   this is some other text.                         |

and it is on the very left side of the background when user looks at the webpage on full screen. I want to change it, so that the text is visible like this:

|                  this is header                    |
|              this is some other text               |

How can I do that?

My jsfiddle is here:

https://jsfiddle.net/0zfktus3/

Take the `max-width` off of the `h2` and `p` and then add `text-align:center;` to the container. [Updated Fiddle](https://jsfiddle.net/0zfktus3/3/) — APAD1, Mar 20 '17 at 16:10

score 4 · Accepted Answer · answered Mar 20 '17 at 16:12

4

Remove the max-width from the h2 and p.

Add a class of text-center to the container.

answered Mar 20 '17 at 16:12

cnrhgn

703
4
18

score 2 · Answer 2 · answered Mar 20 '17 at 16:10

2

You can add a bootstrap class text-center to center all the text inside an element.

See this fiddle

The updated HTML for .container would be as follows

    <div class="container text-center">
        <h2>this is header</h2>
        <p>this is some other text.</p>
    </div>

Please read the docs to know more about the Bootstrap Alignment classes

answered Mar 20 '17 at 16:10

Lal

14,726
4
45
70

@user3766930...first one to answer..so sad.. :( – Lal Mar 20 '17 at 16:27

score 1 · Answer 3 · answered Mar 20 '17 at 16:11

Add the class "text-center" to the container div.

<section class="cta">
     <div class="cta-content">
        <div class="container text-center">
            <h2>this is header</h2>
            <p>this is some other text.</p>
        </div>
    </div>
    <div class="overlay"></div>
</section>

score 0 · Answer 4 · answered Mar 20 '17 at 16:12

0

you can simply use css to align it in centre all following code to your css

h2{
  text-align:center;
}

p{
  text-align:center;
}

answered Mar 20 '17 at 16:12

RANVIR GORAI

1,226
11
10

how can I center my text in bootstrap?

4 Answers4

See this fiddle