I have an accordion where it has a flex-row textbox and it has icons on its right.
I need to add the menu positioned as shown in the image below
My code is here
<html>
<head>
<style>
.accordion {
margin: 30px;
}
.accordion-button.collapsed {
border-bottom: #ccc 1px solid
}
.accordion-body {
border-left: #673ab744 1px solid;
border-bottom: #673ab744 1px solid;
border-right: #673ab744 1px solid
}
.accordion-button {
display: inline!important
}
.flx-row {
display: flex;
justify-content: space-between;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<div class="flx-row">
<div>
<input type="textbox" value="Accordion Item #1">
</div>
<div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
<span class="wcopy material-symbols-outlined text-primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-primary">delete</span>
</div>
</div>
<br><span>Desc goes here</span><br><span>Desc goes here</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<script type="text/javascript">
$(".wdelete").off().on('click', function(event) {
if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
$(this).closest('.accordion-item').remove();
}
event.preventDefault();
event.stopPropagation();
});
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>
Listen you may not refer to your problem's answer
Note if your question was anything else plz let me know
Just have a container div then tell your div that has two children
One is left(your items and options)
And right hand your inputs such dropdown list and that delete icon
So just forget about the flex-row class.
Put your entire code shown in the question in a div with the style of =
display:flex;
Then
Have two (div)s
First
div (your items #item ...) with syle of =
flex:80%;
And div (drop down list and delete icon ...) with style of =
flex:20%;
So:
<div class='father-of-two-children'>
<div class='left-hand-div'>
My options ...#items..
</div>
<div class='right-hand-div'>
delete icon ...dropdown list...
It is based on your periority of
your items and inputs.they will
appear in order.
</div>
</div>
<style>
.father-of-two-children{
display:flex;
}
.left-hand-div{
flex:80%;
}
.right-hand-div{
flex:20%;
}
</style>
The code I presented for you previously (as below) works perfectly fine. You can list any element you wish to be flex aligned in the row.
The issue you are having is the code you are using is not semantically correct. For example: you have buttons nested within buttons. A button should be the final interactable element in a hierarchy. I recommend you change the accordion interaction to simple a div.
Once you have refactored your code, you should be able to align items easily within a 2-dimensional flex array using align-items.
You may wish to try and get a better understanding of flex before moving forward.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
.pad {
padding: 10px;
}
.flx-row {
display: flex;
justify-content: space-between;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="flx-row pad">
<div>
<input type="textbox" value="Accordion Item #1" />
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
<div>
<span class="wcopy material-symbols-outlined text-primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-primary">delete</span>
</div>
</div>
Take your 'Span Tags' for Icon Inside div of class 'btn-group' then icons will automatically come next to the drop down
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-
toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
<span class="wcopy material-symbols-outlined text-
primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-
primary">delete</span>
</div>
Related
I have an accordion where it has a flex-row textbox and it has icons on its right.
I need to add the menu positioned as shown in the image below
My code is here
<html>
<head>
<style>
.accordion {
margin: 30px;
}
.accordion-button.collapsed {
border-bottom: #ccc 1px solid
}
.accordion-body {
border-left: #673ab744 1px solid;
border-bottom: #673ab744 1px solid;
border-right: #673ab744 1px solid
}
.accordion-button {
display: inline!important
}
.flx-row {
display: flex;
justify-content: space-between;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<div class="flx-row">
<div>
<input type="textbox" value="Accordion Item #1">
</div>
<div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
<br><span>Desc goes here</span><br><span>Desc goes here</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<script type="text/javascript">
$(".wdelete").off().on('click', function(event) {
if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
$(this).closest('.accordion-item').remove();
}
event.preventDefault();
event.stopPropagation();
});
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>
I think you're looking accordion like this
here's full code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.card-header-custom{
display: flex;
justify-content:space-between;
}
</style>
</head>
<body>
<div class="container mt-3">
<div id="accordion">
<div class="card">
<div class="card-header card-header-custom">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Accordion Item #1
</a>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
More
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Accordion Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
Accordion Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After opening drop-down, while scrolling the list is sticking on top or bottom of the div. I tried changing positions of parent div and drop list. But couldn't figure it out. Is there any way to make drop-list it scroll along with the button?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
</body>
</html>
.card {
height: 150px;
width: 30%;
border: 2px solid black;
margin: 100px 0px 0px 100px;
overflow: auto;
}
When the menu gets out of boundaries, the js of bootstrap makes it stick to the boundaries to keep the menu stay by adjusting the position.
When it gets out of boundaries, bootstarp put x-out-of-boundaries attribute to recognize it.
You can use this to achieve it.
.dropdown-menu[x-out-of-boundaries] {
transform: translate3d(0px, 30px, 0px) !important;
}
You can adjust the position as you want.
Here is an example.
I'm using a Bootstrap 4 navbar and added a left-border of a different color for design purposes.
This has the unforunate side-effect of causing the container of the navbar to not be lined up with the container of the main content.
I'm trying to offset the inner container 80px to compensate for the border, but when I try adjusting the position it obviously messes up the rest of the layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
}
</style>
</head>
<body>
<div class="content-wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand"
href="/">Site</a>
<button class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#mainMenu"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse"
id="mainMenu">
<div class="form-inline ml-auto">
<label class="sr-only"
for="search-text">Search</label>
<div class="input-group mr-2 mb-2 mb-sm-0">
<input type="text"
class="form-control"
id="search-text"
placeholder="search...">
<div class="input-group-append">
<a href="/search/"
type="button"
id="search-button"
class="btn btn-light">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<a href="/account/login"
class="btn btn-outline-light">log in</a>
<a href="/account/signup"
class="btn btn-info ml-2">sign up</a>
</div>
</div>
</div>
</nav>
<div class="container">
<ol class="breadcrumb my-4">
<li class="breadcrumb-item active">Bread crumbs</li>
</ol>
<h1>and some content</h1>
</div>
</body>
</html>
CodePen
You can add padding-right: 80px; to .navbar to push it back.
Not sure if I understood correctly but you can try:
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
margin-left:0px !important
}
how do i display the image on the .middle div to the full screen, i get a little white space at the end of the image in the right.i am using bootstrap 3 and css and html The image in the middle div is not taking the entire space it happens when i use the row class.I have included the css and html code.
#content{
text-align: center;
padding-top: 25%;
}
.middle {
background-image: url(https://images.unsplash.com/photo-1415369629372-26f2fe60c467);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 700px;
font-family:Lato;
color: white;
}
html{
height: 100%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr{
width: 400px;
border-top:1px solid #f8f8f8;
border-bottom: :1px solid rgba(0,0,0,0.2);
}
a{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Purfect match</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<span class="glyphicon glyphicon-fire"></span> Purfect Match
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Pets For You</li>
<li>Blog</li>
<li>Careers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in <i class="fas fa-user-plus"></i></li>
<li>Log in <i class="fas fa-user"></i></li>
</ul>
</div>
</div>
</nav>
<div class="middle">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Perffect match</h1>
<h3>The Only Human-feline dating app</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The issue doens't come from your background-image, but from your last <div class="row">
You MUST put the bootstrap row inside an element with class container or container-fluid
Try to replace your last block with :
<div class="container">
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
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>