Solved

align content directly in the middle horizontally and vertically

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

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 9

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

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.
In  today’s increasingly digital world, managed service providers (MSPs) fight for their customers’ attention, looking for ways to make them stay and purchase more services. One way to encourage that behavior is to develop a dependable brand of prod…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now