Twitter Bootstrap Question posted in

How to simply vertical center a div with text beside another div with buttons with Twitter Bootstrap 3

I just want to perfectly vertical center a text in a div beside two buttons in other div on a same line.

My text have text-left class and my buttons have text-right.

I searched all afternoon, maybe i need another look…

<div class="row">
  <div class="col-xs-8 col-xs-offset-2 text-left" style="padding: 10px; border: 1px solid gray; margin-top: 10px;">
    <div class="col-xs-4">
      A simple text here.
    </div>
    <div class="col-xs-8 text-right">
      <button name="spy" class="btn btn-info">Espionner</button>
      <button name="attack" class="btn btn-danger">Attaquer</button>
    </div>
  </div>
</div>

Here is my JSFiddle

Should i use something else than only Twitter Bootstrap’s classes ?

Thanks 🙂

Tags:

2

Answers


  1. 0

    Check whether you want something like this–

    JS FIDDLE

    .col-xs-6  h5 {
  vertical-align: middle;
  display: inline-block;
}
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-8 col-xs-offset-2 text-left" style="padding: 10px; border: 1px solid gray; margin-top: 10px;">
    <div class="col-xs-6">
    
      
     <h5>
     
     A simple text here. </h5>
    </div>
    <div class="col-xs-6 text-right">
      <button name="spy" class="btn btn-info">Espionner</button>
      <button name="attack" class="btn btn-danger">Attaquer</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    <div class="row">
  <div class="col-xs-10 col-xs-offset-2 text-left" style="padding: 10px; border: 1px solid gray; margin-top: 10px;">
   <form  class="form-inline">
    <div class="row">
        <label class="span1" >A simple text here.</label>
         <button name="spy" class="btn btn-info">Espionner</button>
      <button name="attack" class="btn btn-danger">Attaquer</button>
    </div>
    </form>
  </div>
</div>

    If you want to vertically aligned All three component then you should use from-inline class and Html look like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search