Vertical Bootstrap Panel Heading

Question

I have a bootstrap panel which I have moved the heading to the left side. I am working on getting the text to be vertical (rotated 90 degrees).

I have this for the most part but I am having some trouble getting other things aligned with the CSS.

My end goal is that the icon comes before the Title/Sub Title, everything is centered in the panel heading, and the sub title comes below the title.

.panel {
  position: relative;
}

.panel-default>.panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary>.panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success>.panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-info>.panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-warning>.panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-danger>.panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-leftheading {
  width: 42px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
}

.panel-lefttitle {
  margin-top: 110px;
  margin-bottom: 0;
  font-size: 12px;
  color: inherit;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.panel-rightbody {
  margin-left: 50px;
  height: 100%;
}

.mainTitle {
  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">
            <span class="titleWrapper">
                <center>
                <i class="fa fa-user"></i>
              <span class="mainTitle">
                Main Title Here
              </span>
            <br>
            <span class="subTitle">
                (Sub Title)
              </span>
            </center>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

I tried all of the alignment properties I knew of (text-align, align-content etc) but they didn't seem to adjust the content within the divs as I expected.

How can I align the content to the middle while keeping the icon to the left of the text?

(JS Fiddle: http://jsfiddle.net/jbk075c8/2/)

End Goal:

Answer 1

You should be able to use a combination of display: flex | flex-inline and float to get this to work. Here's an example:

.panel {
  position: relative;
}

.panel-default>.panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary>.panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success>.panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-info>.panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-warning>.panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-danger>.panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-leftheading {
  width: 42px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
  display: inline-flex;
}

.panel-lefttitle {
  margin-top: 150px;
  margin-bottom: 0;
  font-size: 12px;
  color: inherit;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.panel-lefttitle i {
  margin-bottom: 20px;
  margin-right: 10px;
}

.panel-rightbody {
  margin-left: 50px;
  height: 100%;
}

.mainTitle {
  display: block;
  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}

.titleWrapper {
  text-align: center;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle text-center">
            <i class="fa fa-user pull-left"></i>
            <span class="titleWrapper">
          <span class="mainTitle">
            Main Title Here
          </span>
            <span class="subTitle">
            (Sub Title)
          </span>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

JS Fiddle Link

Let me know if this helps you.

Answer 2

The other solution using flex does not account for different lengths within the title boxes. If you want a solution that can keep all content centered correctly even if the titles are different length then you want to use absolute positioning.

The below code and example show with 3 title-boxes on the page, all with different title lengths. Yet keep the titles perfectly centered in the left title frame.

---

Adjust the .panel-leftheading to

  position: absolute;
  top: 0; //stick to the top
  left: 0; //stick to the left
  height: 100%; //have a height equal 100% of the parent div
  width: 42px; //be 42px wide

This ensures your heading panel is always on the left, always 100% height of the parent and gives us a good container to do our absolute center trick.

update the .panel-lefttitle to have:

position: absolute; //absolute position for the child
left: 50%; //move left half width of the parent div
top: 50%; //move top half width of the parent div
transform: rotate(-90deg) translate(-50%, -50%); //rotate the child 90 degrees, as well as translate the container -50% of it's own width to the left, and top.
transform-origin: left top;

Now, this is confusing at first, but I'll walk you through it.

left: 50%; and top: 50% both move the child element 50% of the parents' width from the left and top respectively. so this means that our child element is going to have one of it's corners in the exact center of the container element.

We want to then move that element 50% of it's own width, and 50% of it's own hight back from what we just moved, as this will put the center of the child element in the center of the container element.

We can achieve this by adding the translate(-50%, -50%) to your transform. transform: translate when percent is specified will move the element based on it's own size.

This properly centers the child div in the container div, even when we are doing a 90 degree rotation on it. Allowing for a single piece of css to handle multiple of these, even if each one has a slightly different text length.

Here is a fiddle with a working example: http://jsfiddle.net/bke20hyg/