CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5719239
user5719239

Reputation:

bootstrap button size without changing the size of navbar

I want to put login button on navbar, but as soon as I put it on navbar the size of navbar increases. how do I prevent the navbar changing the size and change the size of button?

<div class="navbar-primary">
  <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
<ul class="nav navbar-nav navbar-right">

        <li><a href="/accounts/signin/">login</a></li>
        </ul>

Here I want to replace the word login with a bootstrap button, I've tried putting <button class="btn btn-primary" type="submit">Sign in</button> inside but navbar size changes because of the size of button

Edit:

  • register
  • loginenter image description here

    • Upvotes: 0

    Views: 564

    Answers (1)

    HTMLNoob
    HTMLNoob

    Reputation: 821

    Ok here is a simple solution just add this selector and styles

    .btn-sm {
padding-top: 0px;
padding-bottom: 0px;
}

    Here is a link to a codepen with the exact code except with the styles that I provided

    Example

    You can add and remove the styles to see the difference.

    And in case you want the navbar to be a little bit bigger just add to the padding-top and padding-bottom accordingly.

    Upvotes: 1

    Related Questions