CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bchards
bchards

Reputation: 401

How to Centre Heading and Text Within a Panel

I have created a panel within a column, within a row.

Inside of this panel I have a heading, and some text within a paragraph.

I was wondering how I can centre these items within the panel that they are in?

<div class="row">
  <div class="col-lg-7">
    <div class="panel">
      <h2>Heading</h2>
      <p>Text</p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 103

Answers (2)

Rage Kage
Rage Kage

Reputation: 427

If you have a DIV class set up div class="panel"> and you always want that text to be centered, then you can set up your CSS like:

div.panel {
 text-align: center }

If you only want this one div to have centered text (rather than an entire class) you could also try this in your html:

<div class="panel" align="center">
Content
</div>

This would only make this one div.panel centered rather than changing your css to make all div.panel's centered.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Just add the class text-center to the main <div>.

<div class="panel panel-primary text-center">
  <!-- -->
</div>

Whatever you put in <p>, <table>, inherit the text-center and have their text aligned center...

Upvotes: 1

Related Questions