I wanted to use this bootstrap generator which was recommended in this post
The generated code doesn't change anything, and my guess is I messed up on my labeling somewhere.
<div style="background-color: #18305c">
<div class="container text-center">
<nav class="navbar navbar-default" role="navigation">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">
Home
</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browse <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Latest Offers</li>
<li>Newest Listings</li>
<li><a href='#'>Clearance</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Blog</a></li>
</ul>
</div>
The css looks like
.navbar-default {
background-color: #18305c;
border-color: #d49418;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
Why is it not changing?
Edit: Wanted to add this is only the top of the nav bar. There are a few more buttons with similar dropdown.
Okay. So by reading the above comments, you want to change the button color.
You have used the class btn-default, If you want the button color to be of blue change its class to btn-primary.
Checkout this link for various button colors.
Related
I have cretaed this button in Bootstrap.
<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="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown">Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
I have used some Bootstrap classes for buttons but when I try to change the color of this button in css nothing seems to happen.. How is it possible to change the color of this button in Bootstrap?
Here is my css :
.dropdown-menu{
background: #ff6600;
}
Thanks!
You need to override the css. And I suggest you not to use glyphicon classes on button directly instead use a <i></i> inside the button and set the class on it like in this answer. This way you will get proper alignment. Yours was having some alignment problem
.btn.btn-default,
.btn.btn-default:focus{
background-color:#0066ff;
color:#fff;
}
.btn.btn-default:active,
.btn.btn-default.dropdown-toggle:active,
.btn.btn-default:hover{
background-color:#0099ff;
color:#fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-shopping-cart""></i> Carello (99)
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
You are currently using .btn-default. Now you could make use of any of the other default Bootstrap button colors: .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger.
Alternatively, you can modify the color of this button to a color of your choosing by writing a style for:
.dropdown2 .btn-default {
background: YOURCOLORHERE;
color: YOURCOLORHERE;
}
Add the required styles like below.
button.btn {
background-color: coral;
color: white;
border-color: red;
}
button.btn:hover {
background-color: darkviolet;
color: white;
border-color: darkviolet;
}
<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="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown"> Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
I'm making a navbar using Bootstrap, which can be seen here
All links are behaving the same way except the 'Save and exit' link. What can I do to make 'Save and Exit' look the same? Don't know why it keep being blue when it's meant to be grey as the other links?
Code included below.
HAML:
%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
= link_to image_tag("logo-builder.png"), root_path
%ul.nav.navbar-nav.pull-xs-right
%li.nav-item
%button.btn.btn-link{type: 'button', 'data-toggle' => 'modal',
'data-target' => '#explainQuestionModal'}
Explain Question
%button.btn.btn-link
Preview
%button.btn.btn-link
= link_to 'Save and exit', root_path
= render 'explain_question_modal'
HTML:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<%= link_to image_tag("logo-builder.png"), root_path %>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
Explain Question
</button>
<button class="btn btn-link">
Preview
</button>
<button class="btn btn-link">
<%= link_to 'Save and exit', root_path %>
</button>
</li>
</ul>
</nav>
<%= render 'explain_question_modal' %>
CSS:
.btn-link {
color:grey !important;
font-size:0.9em;
}
.btn-link:hover {
color:white;
}
.btn-link:focus {
color:white;
}
Because you are styling a button with class .btn-link but "save and exit" has a a link as child of that button which is wrapping the text "Save and Exit"
so you need to add .btn-link a {color:grey} to apply the color to the link
Note: I fixed the :hover to work with a as well
Snippet
.btn-link {
color: grey;
font-size: 0.9em;
}
/*added*/
.btn-link a {
color: grey;
text-decoration:none;
display:block
}
.btn-link:hover, .btn-link:hover a {
color:white;
}
.btn-link:focus, .btn-link:focus a {
color:white;
}
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a href="#">
<img src="//lorempixel.com/100/100" />
</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
Explain Question
</button>
<button class="btn btn-link">
Preview
</button>
<button class="btn btn-link">
Save and exit
</button>
</li>
</ul>
</nav>
As an alternative, you don't necessarily have to use buttons, you can just use a tags for simplification.
Working example Snippet
.nav-item .nav-link {
color: grey;
outline: none;
}
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" href="#explainQuestionModal">Explain Question</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Save and Edit</a>
</li>
</ul>
</nav>
<div class="modal fade" id="explainQuestionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Title</h4>
</div>
<div class="modal-body">
Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
HAML Example
%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
%a.navbar-brand{:href => "#"} Brand
%ul.nav.navbar-nav.pull-xs-right
%li.nav-item
%a.nav-link{'data-toggle' => 'modal', 'data-target' => '#explainQuestionModal'}
Explain Question
%li.nav-item
%a.nav-link{:href => "/preview"}
Preview
%li.nav-item
%a.nav-link{:href => "/save"}
Save and Edit
.modal.fade#explainQuestionModal(tabindex="-1" role="dialog" aria-labelledby="explainQuestionModal" aria-hidden="true")
.modal-dialog(role="document")
.modal-content
.modal-header
%button.close(type="button" data-dismiss="modal" aria-label="Close")
%span(aria-hidden="true") ×
%h4.modal-title#explainQuestionModal Title
.modal-body
%p Body
.modal-footer
%button.btn.btn-secondary(type="button" data-dismiss="modal") Close
%button.btn.btn-primary(type="button") Save changes
I have a horizontal navigation bar with a four buttons. The third button is a dropdown, however the dropdown is appearing too the far left of the nav-bar, and it should be directly beneath the 'Services' button.
HTML:
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<button class="btn btn-primary dropdown-toggle col-md-3" type="button" data-toggle="dropdown">Services <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Residential</li>
<li>Commercial</li>
</ul>
<button type="button" class="btn btn-primary col-md-3">Contact Us</button>
</div>
CSS:
.nav {
background-color: #171818;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #E3E3E3;
height: 60px;
padding-top: 10px;
text-align: center;
}
.nav a:link{
color: #000000;
}
.nav a:visited {
color: #000000;
}
Here is the code to mess around with:
http://www.bootply.com/iSLasxAcEI
So far I have tried to separate the third button into a another individual <div> but it left a gap between the that button and the others, and I have tried to make other alterations to the Bootstrap dropdown classes.
I have been trying to have it drop directly beneath the 'Services' button but have had no avail. Any help would be greatly appreciated!
I am fairly new to using CSS and Bootstrap but if their is anything that I can do to help make the question more clear, please let me know!
I answered this already. Did you delete the previous question?
<div class="nav dropdown">
<button type="button" class="btn btn-primary col-md-3"> Home </button>
<button type="button" class="btn btn-primary col-md-3"> About Us </button>
<div class="btn-group col-md-3" role="group" style="margin: 0px; padding: 0px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="width: 100%">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<button type="button" class="btn btn-primary col-md-3"> Contact Us </button>
</div>
all you had to do was remove the padding and margin from the btn-group class.
Try below code:
Add below style code to "dropdown-menu" class
position: relative !important;
margin: 47px -264px 0 !important;
"dropdown-menu" class is not mentioned in editor from your link. It is added in a bootstrap file that is not displayed in editor. So apply above code with "!important" inline to "dropdown-menu" class or add it to your custom css file.
I nested a drop down menu inside a group of buttons but I'm having a little trouble styling the drop down menu to look like the main buttons. It seems like there should be bootstrap classes to do this without using css?
I want the drop down items to show a dark background when hovered over, just like when the main buttons get hovered over. See pictures below
There looks to be some styling when the main buttons get clicked as well, no styling takes place when the drop down menu items get clicked.
I would like similar text in the drop down as the main buttons
I'm just trying to make things look consistent.
Here is my code with a partially working Fiddle and some pics that show the button group with drop down I'm trying to style.
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">House</button>
<button type="button" class="btn btn-default">Apartment</button>
<button type="button" class="btn btn-default">Studio</button>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Park</a></li>
<li><a>Beach</a></li>
<li><a>Field</a></li>
<li><a>BackYard</a></li>
<li><a>FrontYard</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
no highlighting when hovering over drop down menu items.
The dropdown menu options are notoriously light. If you want to adjust the shade of the hover effect, you can add your own CSS to match whatever theme you're using.
Here's how you'd do it for the default theme:
.btn-group .dropdown-menu li:hover a {
color: #333;
background-color: #E6E6E6;
border-color: #ADADAD;
}
Demo in Stack Snippet
.btn-group .dropdown-menu li:hover a {
color: #333;
background-color: #E6E6E6;
border-color: #ADADAD;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">House</button>
<button type="button" class="btn btn-default">Apartment</button>
<button type="button" class="btn btn-default">Studio</button>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Park</a></li>
<li><a>Beach</a></li>
<li><a>Field</a></li>
<li><a>BackYard</a></li>
<li><a>FrontYard</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
Just add these to css file to get background color when hovering..
a:link {
text-decoration:none;
color:#2E3D4C;
font-weight: bold;
}
li a:hover {
color:#2E3D4C;
background-color:#C2E0FF;
}
ul.menu li ul {
visibility:hidden;
}
ul.menu li:hover ul {
visibility:visible;
}
ul.menu ul li:hover {
background-color:#6B8FB2;
}
li a:link {
display: block;
padding: 0px;
margin:1px;
}
I'd like a bootstrap dropdown menu where the links are horizontal. Unfortunately, I'm having trouble with getting the width correct. The only way I can seem to make it happen is set the min-width to some arbitrary number. I'd like to do this responsively.
http://jsfiddle.net/3CwzH/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.dropdown-menu>li>a {
display: inline;
}
.dropdown-menu {
min-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Drop it
</button>
<ul class="dropdown-menu" role="menu">
<li>
Google
Facebook
</li>
</ul>
</div>
I have solved your problem. View this JSFiddle for demonstration.
HTML
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Drop it</button>
<ul class="dropdown-menu" role="menu">
<li> Google
</li>
<li> Facebook
</li>
</ul>
</div>
CSS
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li {
display: inline-block;
float:left;
}
.open > ul {
display: inline-flex !important;
}