Question 42653 in Html Question posted in
Some basic documentation can be found here.

How to bring the button in the end in html and bootstrap

I have a button in the main navigation. In mobile view it is coming along Customers link. I want to show it below Pricing link.

How I need it:

How i need like this

.nav-btn button {
  background-color: white;
  color: #000000;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  font-family: AktivGrotesk-Light;
  height: 45px;
  font-weight: 500;
  transition: 0.4s ease-in-out;
}
<div class="collapse navbar-collapse navbar" id="navbarSupportedContent">
  <ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Platform</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Apps</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Customers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
  <form class="d-flex nav-btn">
    <button class="btn" type="submit">Request demo</button>
  </form>
</div>
Tags:

4

Answers


  1. 0

    Run this snippet and see the result.

    .nav-btn button {
  background-color: white;
  color: #000000;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  font-family: AktivGrotesk-Light;
  height: 45px;
  font-weight: 500;
  transition: 0.4s ease-in-out;
}
    <div class="collapse navbar-collapse navbar" id="navbarSupportedContent">
            <ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#"
                  >Platform</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Apps</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Customers</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <form class="d-flex nav-btn">
              <button class="btn" type="submit">Request demo</button>
            </form>
          </div>
    Login or Signup to reply.
  2. 0

    Add another div element below the first div and add justify-content-end class aligns its child elements to the right end of the container. This will move the ul and form elements to the left side of the navbar, and the button to the right side.

    <div class="collapse navbar-collapse navbar" id="navbarSupportedContent">
<div class="d-flex justify-content-end">
<ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Platform</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Apps</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Customers</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>
<form class="d-flex nav-btn">
  <button class="btn" type="submit">Request demo</button>
</form>
</div>

</div>
    Login or Signup to reply.
  3. 0

    While I was checking the website link you posted it got banned, but from what I saw and checked in that litle time the issue is simple and you can tackle it by adding 1 line into your CSS, and from what I remember there is a .navbar class wrapping both UL and Button with a property of flex. So add this line to you css

    .navbar{
   flex-direction:column;
 }

    In you CSS file there is already some styling used for this class just add this line there or in a new line.

    Login or Signup to reply.
  4. 0

    The issue is with the way you arranged your HTML elements and Bootstrap CCS class used. You need to put the lists and the button form into a new div and pass row and col classes in Bootstrap media queries to them.

    The code below should resolve this for both mobile and desktop. Let me know if there is more I can do to help.

    <div class="navbar-collapse navbar collapse show row" id="navbarSupportedContent" style="">
  <div class="col-sm-12 col-lg-8 d-flex justify-content-center">
    <ul class="navbar-nav m-auto mb-2 mb-lg-0 apri-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Platform
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Apps
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Customers
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing
        </a>
      </li>
    </ul>
  </div>
  <div class="col-sm-12 col-lg-4 d-flex justify-content-center">
    <form class="d-flex nav-btn align-item-center">
      <button class="btn" type="submit" fdprocessedid="jfkb08">Request demo
      </button>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search