Bootstrap tabs with split-button dropdowns - html

I'm trying to achieve a nav menu similar to the examples but with a split-button drop-down:
"Tabs with dropdowns"
http://twitter.github.io/bootstrap/components.html#navs
http://twitter.github.io/bootstrap/components.html#navbar
I can have a split button, or I can have a tab with a dropdown, but I can't seem to combine the two. Is this possible?
Tabs with dropdowns:
<div class="">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
Split Button:
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>


So your final result should be a split button instead of a dropdown, correct? Did you try this? (didn't test it)
<div>
<ul class="nav nav-tabs">
<li class="active">
<button class="btn dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>


I've got it near enough now - just need to change the styles a bit.
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="content/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container tabbable">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">ProjectName</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active tabbable">tab1</li>
<li class="tabbable">tab2</li>
<li class="tabbable" id="tabarea3">
<!--<div class="btn-group" data-toggle="buttons-radio">-->
<div class="btn-group">
<a class="btn" id="tab3" href="#tab3" data-toggle="tab">Tab3</a>
<button id="tab3button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="content/bootstrap/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="content/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="content/bootstrap/js/custom.js" type="text/javascript"></script>
Some jquery to deselect the split-button tab (custom.js):
$(document).ready(function () {
var $tabs = $('.tabbable li');
$tabs.on('click', function (sender) {
if($('#tab3').hasClass('active'))
{
$('#tab3').removeClass('active');
}
});
});

Related

Bootstrap 4 dropdown works only once

i'm trying to make a dropdown with bootstrap 4. it works, but the problem is that it toggles only once. Also, I've tried solutions suggested on the site, but any of them could help me. Here's my code:
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>

Try with code here working fine I think you missing adding some bootstrap .js or .css
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dropdown is showing behind the parent div

I have a wrapper div and inside that div there are some buttons with a drop down, wrapper should have a max-height and an auto scroll.
The problem is if I click on a button, now the drop down always will be placed behind the wrapper, is there way to get the drop down on top of the wrapper
jsbin link
.bs-example
{
display: flex;
flex-direction: column;
margin: 30px;
max-height: 100px;
border: 1px solid #F00;
overflow: auto;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>

There you go a working snippet here
.bs-example
{
display: flex;
flex-direction: column;
margin: 30px;
max-height: 100px;
border: 1px solid #F00;
overflow: auto;
}
.dropdown-menu {
position: fixed !important;
top: auto !important;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
You can set left as well for align to left of div, I also use !important; to override bootstrap default styles.

Dropdown menu in Bootstrap 3.3.6 not Working

I am new to programming and I decided to run a little test on Bootstrap 3.3.6 but the dropdown menu is not working. I tried using the CDN links as well both for bootstrap and the script but it's not not working.
What am I missing? Here is the code:
<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"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Skills<span class="sr-only">(current)</span></li>
<li class="dropdown">
Projects<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Schools</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
What is wrong with these code or I'm missing something?

You are missing to Include CDN Files into Header tag. Replace below header tag with your code and try.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notestrap</title>
<link href="bootstrap-3.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Skills<span class="sr-only">(current)</span></li>
<li class="dropdown">
Projects<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Schools</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
</body>
</html>

Center horizontally div elements inside bootstrap? (text-center not working)

I'm having a problem with the text-center class of bootstrap not working, here is it.
I have a div that contains several list and other tags, but when I apply the text-center class to make this center on the screen it does nothing, this applies also in a div that contains divs in shapes, here is my code:
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Solicitud</label></li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Producto</label></li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
As you can see my div with class options-bar is the one that contains the rest, but the class text-center does nothing.
Here is my css stylesheet for options-bar:
.options-bar {
line-height: 50px;
width: 100%;
}

You may use this for centering div's. Add the below code to the div that you want to center.
.centered {
margin: 0 auto;
}
Note: Usually div's occupy entire width(since its a block element). Make sure that the div which you want to center has width lesser than the screen width. Otherwise you may not see any difference.

You can set the .nav.nav-pills li items to flex-grow: 1; which will cause all the list items to expand equally to fill the space. See this fiddle for an example. I also added a snippet below, but it only looks right in full-screen.
.options-bar {
line-height: 50px;
width: 100%;
}
.nav.nav-pills li {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Solicitud</label>
</li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Producto</label>
</li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>

Try this css class in your divs:
.vertCenter {
display: flex;
justify-content: center;
align-items: center;

Logo in the mobile menu bootstrap

I'm working on a bootstrap template, I created a div class with a logo, but when I tight the window of chrome, the logo is up above the mobile menu.
My site (mobile version)
*What I want the mobile version of my site to look like**
My code:
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.logo
{background-color: #FFF;
height: auto;
width: 100%;
padding-bottom: 10px;}
.navbar
{margin-bottom:0px !important;
font-size: 12px;
: #000;}

If you want that your logo be inside your navbar, you should put your logo inside html code of the navbar.
Try to add this line inside your navbar header (and change img path):
<img src="path/to/your/image.jpg">
and add some classes to your extra logo div
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
EDITED example :
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="path/to/your/image.jpg">
<button type="button" class="navbar-toggle collapsed navbar-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

I don't know, when this mobile view comes, so you have to edit the px. In my example the view is showed, when the width is below 720px.
#media (max-width: 720px) {
.logo{
width: 50%;
float: left;
}
.logo img{
width: 100%;
float: none;
}
}
And in the headtag of your html-file you have to add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">