align content directly in the middle horizontally and vertically
The content of these columns is currently touching the bottom of the nav bar. If they were perfectly centered vertically then they wouldn't do that. How is this actually achieved in bootstrap by default?
<nav class="navbar navbar-light bg-faded"> <span class="navbar-text float-xs-right text-muted">
Muted navbar text that's floated right
</span> </nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p class="lead">test</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="text" class="form-control" id="search" placeholder="Search"> </div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<div class="col-sm-4">
<p class="lead">Tel number here</p>
</div>
</div>
</div>ASKER
Ah, I see. I thought maybe there was something built into Bootstrap.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you can add multiple classes to divs etc... like <div class="col-sm-4 spacer">
so you can add a class like "spacer" to either the nav and give it a bottom margin,
OR add this same class to container OR, all 3 columns and add spacing by adding top margin or padding whatever suits you.