?
Solved

align content directly in the middle horizontally and vertically

Posted on 2016-11-10
3
Medium Priority
?
59 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
 
LVL 1

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 2000 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

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
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Suggested Courses

719 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