I am currently working on improving site navigation using the Bootstrap Grid system. My goal is to create a layout with 3 columns and two rows structured as follows:
|Title | |Login|
|Subtitle|Menu buttons| |
Everything seems to be functioning correctly until I attempt to adjust the font-size for the title and subtitle. Does anyone have suggestions or solutions for this issue? Here's the snippet for reference: http://www.bootply.com/GLEf6MfmxE
HTML:
<header>
<div class="container">
<div class="row">
<div class="col-xs-4" id="title">Foo title</div>
<div class="col-xs-6"></div>
<div class="col-xs-2">Login</div>
<div class="col-xs-2" id="subtitle">Bar subtitle</div>
<div class="col-xs-1">Menu 1</div>
<div class="col-xs-1">Menu 2</div>
</div>
</div>
</header>
Custom CSS:
#title{
font-size: 2em;
}
#subtitle {
font-size: 1.5em;
}