CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
vdenotaris
vdenotaris

Reputation: 13637

Bootstrap-based vertical tab: alignment issues

By using Twitter Bootstrap 3.2.0 and a very nice snippet, I've created a menu-box with multiple choices. For each menu item there is a label and a short description, as shown in figure below: IdpSelection menu

You could find an example with the code on JSfiddle.

Now, I'd like to:

  1. Align menu-item content on middle (regarding the vertical-alignment);

  2. Align the submit button on bottom-right.

Someone can suggest me how to do that?

Upvotes: 0

Views: 6834

Answers (1)

Henri Hietala
Henri Hietala

Reputation: 3041

1. Align menu-item content on middle (regarding the vertical-alignment):

I've recently used this excellent tutorial by @beaver82minimit that allows to create equal height columns bootstrap style: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

You can use it like this:

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

With the class col-middle you can center your content vertically.

2. Align the submit button on bottom-right

a) Add class bottom-right to the button and remove the wrapping <p>

<button type="button" class="btn btn-primary btn bottom-right" style="margin: 20px 0 0 0;"><span class="glyphicon glyphicon-log-in"></span> Submit</button>

b) Add this to your stylesheet:

.bottom-right {
    position: absolute;
    right: 0;
    bottom: 0;
}

To prevent tab content to overlap with button, add padding-bottom to tab-content div:

div.bhoechie-tab-content{
  background-color: #ffffff;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 54px;
}

Here is a demo: http://jsfiddle.net/LaBZP/3/

List-group-item vertical aligning middle:

.text-center {
    display: table;
    width: 100%;
}
.text-center > div {
    display: table-cell;
    vertical-align: middle;
}

Add divs under list-group-item to markup:

<a href="#" class="list-group-item idp-group-item text-center">
  <div>
    <strong>Label B</strong><br/>Label B Desc
  </div>
</a>

Demo: http://jsfiddle.net/LaBZP/4/

Upvotes: 2

Related Questions