D.R. D.R. - 11 months ago 65
CSS Question

Vertical Bootstrap nav (rotated -90°)

How to create a Bootstrap Nav with vertically aligned items like so:

enter image description here

I'm not trying to design a stacked layout with horizontally aligned items one below each other.

I tried to add

, however, it looks like rotational transformation is applied after elements are aligned on the page, and therefore I would have to position each element manually using JavaScript. I'm looking for a clean CSS-only solution, possibly without any "hackarounds".

Answer Source

Here's a solution using writing-mode: vertical-lr and then transform: rotate(180deg); plus some CSS to make it work or as a starter (no, flex isn't needed here but I use it so much for navbars...)

Codepen: clearer than snippet below because I could use Autoprefixer (and also Normalize and LESS which is used by Bootstrap 3 but you can use Sass here - if you already use Bootstrap 4 alpha - syntax is identical for both here)

If you don't use Autoprefixer, then result is:

.nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
.nav-tabs > li {
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    list-style-type: none;
.nav-tabs > li > a {
  display: block;
  padding: 0.6rem 1rem;
  background-color: beige;
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>

I didn't include existing CSS from Bootstrap for this component so you'll have to override a bunch of declarations but I at least used the same selectors like *** > li > a and copy-pasted HTML from documentation.

My reasoning is that rotating by +/- 90ddeg is never safe. Width becomes height, height becomes width and it's messy because content is so fluid. So I wrote text vertically with writing-mode and then had to rotate by half a turn text to mimick your design. Doing so doesn't change dimensions of each element so no bad surprise ;)