Bootstrap 3 - Link-Buttons that fill Grid Columns

Question

I am trying to use Bootstrap to quickly whip up a small internal site and I'm having some issues with a specific layout on it's home page.

I have two rows and the first row is filled with link anchors dressed up as buttons. I want them all to be the same width and height, word wrap their contents and have a strong 'title' text with summary text, all text vertically aligned to the middle of the button.

I've achieved fixed width buttons and word wrap but I can't work out where to go from here to get them all the same height and then, of course, vertically align that text to the middle. I'm sure that line break element isn't helping things either.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2">
          <a href="#" class="btn btn-default btn-lg btn-fill" role="button">
            <strong>Button A</strong><br/>
            <span>Long Summary That's Annoyingly Long</span>
          </a>
        </div>
    <div class="col-md-2">
      <a href="#" class="btn btn-default btn-lg btn-fill" role="button">
        <strong>Button B</strong><br>
        <span>Very Long Summary</span>
      </a>
    </div>
  </div>
</div>

CSS

.btn-fill {
  width: 100%;
  white-space: normal;
}

I have a Bootply example here

Solution

You could use .btn-toolbar with .btn-group-justified to make it easily (the rendering differs a little bit) :

<div class="container">
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
      <a href="#" class="btn btn-default" role="button">
        <strong>Part A</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part B</strong><br>
        <span>Very Long Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part D</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part E</strong><br>
        <span>Long Summary That's Annoyingly Long</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part F</strong><br>
        <span>Summary</span>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <strong>Part G</strong><br>
        <span>Very Long Summary</span>
      </a>
    </div>
  </div>
</div>

.btn-group-fill-height .btn { 
  white-space: normal;
}

Bootply

Comments

[Admin]

I've gotten so use to avoiding px I didn't think of that but is there a way for it to fill the height of the parent container without resorting to that?

[Alex Marple]

As with most things, probably. Off the top of my head, I can't think of one (I'm sure someone else will chime in!). Since it's an internal website and Bootstrap provides enough responsiveness, setting a pixel height shouldn't cause you much in the way of trouble.

[Admin]

My problem is the content of the buttons is dynamic.

[Admin]

Works well enough, although, this stops them from stacking on smaller viewports but that can be worked around easily enough.