Solved

align content directly in the middle horizontally and vertically

Posted on 2016-11-10
3
35 Views
Last Modified: 2016-11-10
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
Comment
Question by:Black Sulfur
  • 2
3 Comments
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41882500
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
 

Author Comment

by:Black Sulfur
ID: 41882507
Ah, I see. I thought maybe there was something built into Bootstrap.
0
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
ID: 41882518
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Needing help getting bootstrap 3 validation to fire 2 79
Custom CSS for Bootstrap Nav Bar 3 54
bootstrap table 5 48
Glyph icons in Bootstrap 3 4 57
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question