CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Rockstar5645
Rockstar5645

Reputation: 4518

How to add a heading to the left of a form in bootstrap?

I have a form in a navbar on the top of my page.

Here is the HTML 

<nav id ="topNav" class="navbar navbar-default">
<form class="navbar-form navbar-right navbar-input-group" role="search">
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>
</nav>

And here is the CSS for the form 

.navbar-input-group {
  font-size: 0px; 
  margin-right: 20px;

}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

This is what it looks like on the browser enter image description here

I'd like to add some text (a heading h3) to the left of the form without this happening enter image description here

I just added a h3 element above the form...

<nav id ="topNav" class="navbar navbar-default">
    <h3>Text</h3>
<form class="navbar-form navbar-right navbar-input-group" role="search">

Upvotes: 0

Views: 93

Answers (2)

Cristian Cristea
Cristian Cristea

Reputation: 94

Or use 

<ul class="nav navbar-nav">
  <li><h3>text</h3></li>
</ul>

before the form tag, if you want to add more items to your navbar. Check the examples on the http://getbootstrap.com/getting-started/#examples

https://jsfiddle.net/DTcHh/

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Try this

.navbar h3, .navbar form{
display: inline-block;
}

Upvotes: 5

Related Questions