CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Abhilash
Abhilash

Reputation: 2953

Horizontally center-align a bootstrap button with accompanying text

I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?

<div class="col-md-12 well">
    <div class="col-md-6">
        <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
    </div>
    <div class="col-md-6 text-center">
        <span><em> Already have an account? Login</em></span>
    </div>
</div>

I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.

Upvotes: 3

Views: 19342

Answers (5)

Karl Dawson
Karl Dawson

Reputation: 977

Try this:

.flex-centered {
  display: flex;
  justify-content: center;
  margin-top: 31px;
  height: 46px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
  <div class="col-md-6 text-center">
    <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
  </div>
  <div class="col-md-6">
    <div class="flex-centered">
      <em> Already have an account? Login</em>
    </div>
  </div>
</div>

Upvotes: 4

Abhilash
Abhilash

Reputation: 2953

After some fiddling around I found a solution..Its not a bootstrap solution. But its only few lines of css. If anyone found a bootsrap way post here and I will change the accepted answer. Thank you.

    <div class="row well row-centered">
      <div class="col-md-6 col-centered">
        <h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2>
      </div>
      <div class="col-md-6 text-center col-centered" >
        <span><em> Already have an account?Login
       </div>
      </div>

here is the custom css

  /* centered columns styles */
  .row-centered {
    text-align:center;
  }
  .col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
  }

Upvotes: 1

Nofi
Nofi

Reputation: 2175

Try this code...

<body>
  <div class="row">
    <div class="col-md-6 col-md-push-3">
      <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
    </div>
    <div class="col-md-6 col-md-offset-3">
      <span><em> Already have an account? Login</em></span>
    </div>
  </div>
</body>

Plunker Link

Upvotes: 1

KrisD
KrisD

Reputation: 483

Use col-md-offset-3 along with col-md-6 to center align your content:

<div class="col-md-offset-3 col-md-6">
   ...
</div>

Further more, set text-center class on the outside div and not on span tag:

<div class="col-md-offset-3 col-md-6 text-center">
    <em> Already have an account? Login</em>
</div>

See fiddle here.

Upvotes: 5

GKS
GKS

Reputation: 338

use div outside of span tag 

<div  style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
        </div>

Upvotes: 1

Related Questions