Twitter Bootstrap Question posted in

Aligning button links and block buttons in uncollapsed navbar – Twitter bootstrap

I want to align the button links and the “Donate” button, i.e. make them begin at the same position. I’ve tried using the grid system, but the result was not satisfactory.

Here is the fiddle.

enter image description here

<head>
  <title>
    Test
  </title>
  <!-- Bootstrap -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="header">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right" style="margin: 0">
            <li><a href="#">Log In</a>
            </li>
            <li>
              <p class="navbar-btn">
                <a href="#" class="btn btn-danger btn-block">Donate</a>
              </p>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>
  </div>
</body>
Tags:

2

Answers


  1. 0

    If by “make them begin at the same position” you mean make both buttons left aligned, then all you have to do is simply apply text-align: left to the button (.navbar-btn .btn-danger).

    .navbar-btn .btn-danger {
  text-align: left;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right" style="margin: 0">
          <li><a href="#">Log In</a>
          </li>
          <li>
            <p class="navbar-btn">
              <a href="#" class="btn btn-danger btn-block">Donate</a>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

    https://jsfiddle.net/azizn/mou33Lkz/

    Login or Signup to reply.
  2. 0

    I don’t know what exactly you are trying to ask here. I mean do you want "donate" to align with the link text. If that’s what you want you can apply this css-

    .navbar-btn a{
  text-align:left;
}

.navbar-nav li>a:first-child{
  padding-left:0px;//you can adjust this accordingly
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search