CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
JoshG
JoshG

Reputation: 6745

Centering heading text with button toolbar in Bootstrap3

I am using the .btn-toolbar class in Bootstrap3 to place buttons on both sides of some heading text. I need the heading text to be centered, so I am using the .text-center class.

The text indeed gets centered relative to the space between the buttons. But I'd like the text to be centered on the page itself, just like the text in the main section below the heading in the example below.

Is there any way to accomplish this?

Here's an example to hopefully illustrate this better:

h2 {
  background-color: #e3e3e3;
  text-align: center;
}

.main {
  text-align: center;
}

.btn {
  margin-right: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class='btn-toolbar pull-left'>
  <div class='btn-group'>
    <button type='button' class='btn btn-primary'>Button Text</button>
    <button type='button' class='btn btn-primary'>Button Text</button>
  </div>
</div>
<div class='btn-toolbar pull-right'>
  <div class='btn-group'>
    <button type='button' class='btn btn-primary'>Button Text</button>
  </div>
</div>
<h2>Text</h2>
<div class="main">
  This text is centered on the page.
</div>

Upvotes: 0

Views: 140

Answers (1)

Nikhil Bhandari
Nikhil Bhandari

Reputation: 1584

Instead of using float to position your toolbar, you can try using position: absolute;

Have a look at the following code. Does this help?

h2 {
  background-color: #e3e3e3;
  text-align: center;
}

.main {
  text-align: center;
}

.btn {
  margin-right: 5px;
}

/* New CSS for toolbar */

.my-toolbar{ position: relative;}
.my-toolbar .btn-toolbar{
  position: absolute;
  top: 0;
  bottom: 0;
  
}
.my-toolbar .btn-toolbar.left{
  left: 0;
}
.my-toolbar .btn-toolbar.right{
  right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="my-toolbar">
<div class='btn-toolbar left'>
    <div class='btn-group'>
        <button type='button' class='btn btn-primary'>Button Text</button>
        <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
</div>
<div class='btn-toolbar right'>
    <div class='btn-group'>
        <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
</div>
<h2>Text</h2>
</div>
<div class="main">
This text is centered on the page.
</div>

Upvotes: 2

Related Questions