Bootstrap 3.0 Button in Navbar

Bootstrap 3.0 Button in Navbar

Wrap a <p class="navbar-btn"> around the <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

Screenshot:

Bootstrap link button in navbar

Bootstrap 3 - How to properly display buttons (btn-navbar) in collapsed navbar?

Working Fiddle

You are missing li within ul. HTML markup issue:

 <ul class="nav navbar-nav navbar-right">
   <li><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
   <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
   <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button></li>
 </ul>

bootstrap 3 navbar button functionality

You can query document and listen to event:

new Vue({
  el: "#app",
  data: {
    todos: []
  },
  mounted() {
    document.querySelector('.outside').addEventListener('click', () => {
      this.logout()
    })
  },
  methods: {
    logout() {
      alert("test");
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand" href="#">test</a>
    <button v-on:click="logout()" class="btn btn-primary outside">logout</button>
  </nav>
  <div id="app">
  <h2>my app:</h2>
  <button v-on:click="logout()" class="btn btn-primary">logout</button>
</div>

Correct way of adding a button to a navbar in Bootstrap 3

The correct way to add a button to your navbar is just to add the class .navbar-btn

Keep in mind, HTML is meant to be a semantic representation of your content. If you have only a single item, I would not create an unordered list of items. Then you can display it however you want.

In this case, I would leave out the ul.

Here's a complete navbar:

<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="http://i.imgur.com/GAQSCtB.png" width="25" />
        </a>
        <div class="nav pull-right">
          <button type="button" class="btn btn-primary navbar-btn">
            <span class="glyphicon glyphicon-plus"></span> 
            Activiteit toevoegen
          </button>
        </div>
    </div>
</div>

Here's a Working Demo in Fiddle

screenshot

Update:

If you want to style the button when the menu is collapsed, you can use media queries to change the the style on small screens:

@media (max-width: 768px) { 
    .navbar-btn {
        margin-left: 15px;
    }
}

Demo in fiddle

Bootstrap 3, how to right align button on the navbar?

Check demo

.navbar-header{
  margin-left:5px;
  width:100%;
}

And add

pull-right

class to your button.

bootstrap 3 - 5 navbar collapsible

You can read their own documentation here

Adding a snippet, a modified example from their own page.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Themes
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Bootstrap 3 Navigation Bar toggle button with no function

Include jQuery before Bootstrap like this:

@import url('https://fonts.googleapis.com/css?family=Dosis');@import url('https://fonts.googleapis.com/css?family=Raleway');@import url('https://fonts.googleapis.com/css?family=Montserrat');body {  font-family: Raleway;}footer {  background-color: #000000;  color: #ffffff;  text-align: center;  padding: 5px;}#main-menu.navbar-default .navbar-brand {  color: rgba(255, 255, 255, 1);  font-family: Montserrat;  font-size: 90%;}#main-menu.navbar-default {  font-size: 17px;  background-color: rgba(0, 153, 255, 1);  border-bottom-width: 0px;  font-family: Montserrat;  font-size: 90%;}#main-menu.navbar-default .navbar-nav>li>a {  color: rgba(255, 255, 255, 1);  background-color: rgba(0, 153, 255, 1);}#main-menu.navbar-default .navbar-nav>li>a:hover,#main-menu.navbar-default .navbar-nav>li>a:focus {  color: rgba(255, 255, 255, 1);  background-color: rgba(0, 170, 255, 1);}#main-menu.navbar-default .navbar-nav>.active>a,#main-menu.navbar-default .navbar-nav>.active>a:hover,#main-menu.navbar-default .navbar-nav>.active>a:focus {  color: rgba(255, 255, 255, 1);  background-color: rgba(64, 179, 255, 1);}#main-menu.navbar-default .navbar-toggle {  border-color: #0066cc;  color: #0099ff;}#main-menu.navbar-default .navbar-toggle:hover,#main-menu.navbar-default .navbar-toggle:focus {  background-color: #0066cc;  color: #0099ff;}#main-menu.navbar-default .navbar-toggle .icon-bar {  background-color: #0066cc;  color: #004080;}#main-menu.navbar-default .navbar-toggle:hover .icon-bar,#main-menu.navbar-default .navbar-toggle:focus .icon-bar {  background-color: #0099ff;  color: #004080;}
<head>  <title>Home Page</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <link type="text/css" href="/StyleSheets/ModuleStyleSheets.css" rel="StyleSheet" />  <script type="text/javascript">    var jslang = 'EN';  </script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">  <meta name="viewport" content="width=device-width, initial-scale=1">

  <div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation">    <div class="container-fluid">      <div class="navbar-header">        <a href="index.html" class="pull-left">          <img src="http://www.coding-kids.net/logo.png" width="180px">        </a>        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 class="collapse navbar-collapse navbar-menubuilder">        <ul class="nav navbar-nav navbar-right">          <li><a href="index.html"><i class="fa fa-home"></i> HOME</a>          </li>          <li><a href="tutorials"><i class="fa fa-code"></i> TUTORIALS</a>          </li>          <li><a href="about"><i class="fa fa-align-justify"></i> ABOUT</a>          </li>          <li><a href="faq"><i class="fa fa-question-circle"></i> FAQs</a>          </li>          <li><a href="contact"><i class="fa fa-comments-o"></i> CONTACT</a>          </li>        </ul>      </div>    </div>  </div>  <div>
  </div>  <footer>    © Coding Kids 2016. All rights reserved.  </footer>
  </body>

Related Topics

PHPstorm Less Watcher Configuration

Extend Only First Level on Sass

Change Height-Top of Item When Hover

Highcharts CSS Styles When Exporting

CSS @Font-Face Not Working with Firefox

CSS - Successive Indenting of Siblings After Headings

Customizing Twitter Bootstrap Grid Does Not Work

Why Jquery UI Button Looks Different in Firefox and Chrome

Change Text Color for Gtktoggletoolbutton in C Code (Gtk+3)

How to Create Variable Columns and Fill Them Up

CSS Animation, Fadein/Fadeout 2 Images Continuously

Ie Bug: Absolutely-Positioned Element with a Non-Transparent Background Colour

Mysterious Bottom Border

Highlight CSS Grid

Bootstrap Align Columns of Different Height

What Do Commas Mean in CSS Selectors

Text Overlapping Items in Dropdown Items

Visited Links Color Not Changing in Ie 8


Leave a reply



Submit