CODEWITHSUNDEEP
htmlcssbootstrap-4navbar
JWolfCrafter
JWolfCrafter

Reputation: 157

How to make bootstrap buttons in the navbar span the entire navbar

I am using bootstrap to make my navbar right now and the only things I want in my navbar are 3 buttons that when clicked link to other pages. As of right now I have it looking like this:

https://i.sstatic.net/31s1f.jpg

As you can see those buttons are all just the size of the text that's in them. The code is pretty simple for them right now too:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">

    <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class="nav navbar-left">
        <button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
      </ul>

      <ul class="text-center">
        <button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
      </ul>

      <ul class="nav navbar-right">
        <button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
      </ul>

  </div>
</nav>

How can I make the buttons take up the entire navbar? or is there a better way I should be going about this?

Upvotes: 2

Views: 2695

Answers (2)

mahan
mahan

Reputation: 14935

Welcome to the community.

flex-grow-1 takes as much space as available.

There are a couple of ways to do so. But I think it is best to use the flex-grow-1 class on the buttons. It is bugs free, and when there is not enough place for the three on the same line, the line breaks, and they each occupy all the available space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">MY PROFILE</button>
</nav>

https://codepen.io/anon/pen/YOaXwb

Now, since there are three elements with the flex-grow-1 class, their parent's width is divided proportionately between them.

You may use mb-* or my-* class on the buttons to add some margin. If the line breaks, it is good to have same space below the buttons.

https://codepen.io/anon/pen/vzRNWm

If you want that each of the buttons takes 100% width of the nav, use d-block on the nav and w-100 on the buttons.

  • navbar is flex by default. d-block makes it block
  • w-100 sets width of buttons to 100%

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-block ">
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">MY PROFILE</button>
</nav>

https://codepen.io/anon/pen/eLMpJX

Upvotes: 1

Ashu
Ashu

Reputation: 2266

You need to use the li element inside the ul element. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body>

  <nav class="navbar navbar-dark">

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
      </li>
    </ul>

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
      </li>
    </ul>

    <ul class="nav">
      <li class="nav-item">
        <button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
      </li>
    </ul>

  </nav>

Upvotes: 1

Related Questions