CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3vertical-alignment
FalcoGer
FalcoGer

Reputation: 2467

Vertical align Checkbox with Bootstrap 3 Tabs in row

I have this setup here, where I have a few tabs and to the right is a checkbox.
I would like the checkbox to be vertically aligned in the center along with the tab labels.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <ul class="nav nav-tabs" role="tablist">
        <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
        <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
        <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
      </ul>
    </div>
    <div class="col-sm-6 pull-right">
      <span><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
    </div>
  </div>
</div>

I have seen this answer but adding vcenter class and defining it as given

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

doesn't do the trick for me and neither does assigning those styles to the div with the column itself. I also tried mucking around with display: table and table-cell and vertical-align: middle, but this doesn't work either.

Flexbox is not an option unfortunately.

Upvotes: 2

Views: 963

Answers (3)

Punitha Subramani
Punitha Subramani

Reputation: 1477

You can simply add style in existing row class or if you dont want to disturb that add new class in element like below 

<div class="middle-row row">

css

.middle-row  {
    display: flex;
    align-items: center;
}

If you want, you can also prefer align-items: flex-end;

Upvotes: -1

leonheess
leonheess

Reputation: 21451

I added some basic CSS. Is that what you requested?

.nav {
  float: left;
}

#checkbox {
  float: right;
  padding: 10px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
    <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#">Tab2</a></li>
    <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
  </ul>
  <div id="checkbox">
    <input id="cb_D" type="checkbox" onclick="/* do things */">
    <label for="cb_D">CB</label>
  </div>
</div>

I floated the navigation to the left and the checkbox to the right to make them appear next to each other. I also looked up how much padding Bootstrap applies to the tabs and used the same on my checkbox-div.

Upvotes: 2

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Here you can apply specific css with line-height and vertical-align:middle;

.customvcent,.customvcent *{
  line-height:42px;
  vertical-align:middle;
}

.customvcent input[type=checkbox]{
  margin:0px;
}

.customvcent label{
  margin-bottom:0px;
}
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <br/>
  <br/>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-xs-8">
        <ul class="nav nav-tabs" role="tablist">
          <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
          <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
          <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
        </ul>
      </div>
      <div class="col-sm-6 col-xs-4">
        <span class="customvcent pull-right"><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions