• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

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>

Open in new window

0
Black Sulfur
Asked:
Black Sulfur
  • 2
1 Solution
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
Yes, there are many ways by which this can be achieved...

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.
0
 
Black SulfurAuthor Commented:
Ah, I see. I thought maybe there was something built into Bootstrap.
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
yes there are some built in classes which help for common tasks.... but ultimately they are just CSS classes... so the common practice is to use whatever is already available in bootstrap and THEN create additional classes which you may need as per requirements.

here is a link where various classes are explained with examples...

http://getbootstrap.com/css/

please read different links in the top menu and you may find many useful classes already there.
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now