Solved

align content directly in the middle horizontally and vertically

Posted on 2016-11-10
3
48 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 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.

752 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