CODEWITHSUNDEEP
csstwitter-bootstrap
Upgradingdave
Upgradingdave

Reputation: 13056

Vertical Align Bootstrap 3.3.7 buttons

I can't figure out how to vertically align text next to the buttons in the following snippet. Any ideas?

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div id="actionButtons">
        <button class="btn btn-default">
          Cancel
        </button>
        <button class="btn btn-default">
          Certify and Submit (1)
        </button>
        <div style="display:inline-block;text-align:center;width:460px">
              Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
        </div>        
      </div>
    </div>
  </div>
</div>

This will be viewed on devices with at least 1000px screen width, so when you run the snippets, please choose "full screen" to see the example.

Here's a codepen with the same code as above: https://codepen.io/upgradingdave/pen/dgzdKL

The snippet below is closer to what I was aiming for, but I was hoping to accomplish this without changing the html markup above: 

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
<div class="container-fluid">
  <div class="row" style="height:100px;border:1px solid black;">
    <div class="col-xs-1">
      <button class="btn btn-default" style="margin-top: 30px;">
        Cancel
      </button>
    </div>
    <div class="col-xs-2">
      <button class="btn btn-default" style="margin-top: 30px;">
        Certify and Submit (1)
      </button>
    </div>
    <div class="col-xs-3">
      <div style="text-align:center">
        Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
     </div>
  </div>
</div>

Upvotes: 0

Views: 774

Answers (2)

Anand
Anand

Reputation: 207

try this

#actionButtons{
  display:flex;
  align-items:center;
  -webkit-align-items:center;
  -moz-align-items:center;
}

Upvotes: 1

Chris W.
Chris W.

Reputation: 23270

For your instance, you're not really using the bootstrap grid, you could take what's in my example and put it in a 12 column row if ya want to get the spacing, but the cause of your issue is just the button defaults needing a display of inline-block and then that <br/> you have in there is kicking down a new line after "Certification" as would be expected.

Cheers

.btn {
  display: inline-block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-default">
  Cancel
</button>

<button class="btn btn-default">
  Certify and Submit (1)
</button>        

  Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true

Upvotes: 1

Related Questions