0

Ok so I'm designing a Bootstrap accordion heading panel with multiple elements in it:

  1. A big button
  2. Some (shortish) text/title that could be multiple lines long
  3. A small button group on the left

In theory that's working quite fine, at least if the title is not too long for the container. If it starts spilling into a second or third line, the whole concept falls apart. See my fiddle here.

What I want is that all elements are always 1. Next to each other, 2. Vertically centered.

So let me try and draw how it should look with bigger titles:

-----------------------------------------------------
|                                                   |
| -------    Text that spillls over    ----------   |
| | BTN |    into the next line and    |  |  |  |   |
| -------    beyond!                   ----------   |
|                                                   |
-----------------------------------------------------

So basically, each of the three elements has it's well defined space and is vertically centered inside that.

How do I achieve this?

cpury
  • 1,003
  • 10
  • 18
  • Did you try anything? – Hossein Shahsahebi Aug 04 '15 at 17:01
  • Well, yeah I tried googling it, but none of the questions I found involved text and possible line breaks. The closest I found was http://stackoverflow.com/questions/17976940/how-do-i-align-images-in-a-row-all-vertically-aligned-in-the-middle-no-matter-wh but it doesn't seem to work in my case. I also tried using `vertical-align` and a bunch of other hints I found, but to no avail. I guess the main problem could be that I can't put this problem into the correct terms to google it. I'm sure there are tons of solutions somewhere. – cpury Aug 04 '15 at 17:03

3 Answers3

5

You can do this very simple with bootstrap grid system, read some information here: http://getbootstrap.com/css/

It should be something like:

<div class="row">
    <div class="col-md-2">left content</div>
    <div class="col-md-8">middle content</div>
    <div class="col-md-2">right content</div>
</div>

You should read bootstrap documentation, there are more examples and more "how to", so you can find what you exactly need

Just some basics:

  • bootstrap grid has 12 "spaces" for columns. In example above, I created 3-column layout with middle column larger than the other (you can see 2-8-2 - and you can play wiht 3-6-3 or similar - sum must be always 12)
  • the "md" in col-md-... means that this column is visible only on Medium devices Desktops (≥992px), you can use "xs", or other for smaller device - it depends on what you need
areim
  • 3,371
  • 2
  • 23
  • 29
  • Hmm I tried using the grid but stopped halfway through because I wasn't sure if it's really for this use case. Now that I know it's the right way to go I'll have another look, thanks! – cpury Aug 04 '15 at 17:15
  • Sorry, I marked the other one because it also includes the vertical alignment solution. Thank you so much though! – cpury Aug 04 '15 at 17:30
2

Here is something that maybe what you're looking for, with vertical centering.

Here is a fiddle

And the code :

Css:

.cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

HTML:

<div id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="row">
            <div class="col-xs-2 cell">
                <button type="button" class="btn btn-default some-button">button!</button>
            </div>
            <div class="col-xs-8 cell">
                <h4 class="panel-title pull-left heading">
                  <a>Short</a>
                </h4>
            </div>
            <div class="col-xs-2 cell" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default">a</button>
                    <button type="button" class="btn btn-default">b</button>
                    <button type="button" class="btn btn-default">c</button>
                </div>
            </div>
        </div>
    </div>
    <div id="panel-2" class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="row">
                <div class="col-xs-2 cell">
                    <button type="button" class="btn btn-default some-button">button!</button>
                </div>
                <div class="col-xs-8 cell">
                    <h4 class="panel-title pull-left heading">
                        <a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
                    </h4>
                </div>
                <div class="col-xs-2 cell">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">a</button>
                        <button type="button" class="btn btn-default">b</button>
                        <button type="button" class="btn btn-default">c</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
areim
  • 3,371
  • 2
  • 23
  • 29
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
  • Thanks, that's really close to what I want! Will take it from here. – cpury Aug 04 '15 at 17:30
  • Hmm the `float: none` in the `cell` class messes up everything, i.e. elements are not always aligned by their grid cells... But when I remove it, the vertical alignment stops working. Any ideas? – cpury Aug 04 '15 at 17:52
  • Ok it seems `.cell` needs `display: inline-block;` instead of `table-cell`. – cpury Aug 05 '15 at 05:06
  • Aand one more trick was needed so I could let the columns add up to 12: http://stackoverflow.com/a/20548578/1257278 (The dark magic with the comments between divs) – cpury Aug 05 '15 at 05:28
0

Why not put your button and button group into your h4 element? Also take the pull left off your div elements. Here is a fiddle with everything line up. I dont know if this is what you were looking for but I added a center align to the css class and removed the pull left from the panel title elements. I also threw the buttons into the header element

<h4 class="panel-title heading">
    <div class="pull-left">
  <button type="button" class="btn btn-default some-button">
    button!
  </button>
</div>
  <a>
    Some string (short)
  </a>
    <div class="btn-group pull-right">
  <button type="button" class="btn btn-default">a</button>
  <button type="button" class="btn btn-default">b</button>
  <button type="button" class="btn btn-default">c</button>
</div>
</h4>
code
  • 1,127
  • 7
  • 14