(edit) This is my first attempt at creating a vertical text using the CSS properties writing-mode: vertical-lr and transform: rotate(180deg);. I have also included some additional CSS to make it function properly or as a starting point (even though flex isn't necessary, I tend to use it frequently for navbars...)
Codepen link: I find this clearer than the snippet provided below because I was able to utilize Autoprefixer (as well as Normalize and LESS which Bootstrap 3 uses, however Sass can be used here - especially if you are already familiar with Bootstrap 4 alpha as the syntax is identical for both).
If Autoprefixer is not being utilized, the result would look like:
.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>
</ul>
I did not include any existing CSS from Bootstrap for this particular component, so you will need to override numerous declarations. However, I followed the same selectors like *** > li > a and copied the HTML structure from the documentation.
The reason behind my approach is that rotating by +/- 90 degrees is never straightforward. The width becomes height, and vice versa, leading to messy content display. Therefore, I opted to write text vertically using writing-mode and then rotated it half a complete turn to match your design specifications. By doing so, the dimensions of each element remain unchanged without any surprises ;)