I want to make Drop left rather then drop down in bootstrap drop down button. I'm trying to make this happen but i can't able to do this, Can anyone guide me to do this?
Here is my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu ">
<button class="btn btn-primary">Action 1</button>
<button class="btn btn-danger">Action 2</button>
</ul>
</div>
</div>
<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.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
This part of the css where there is top and left:
.dropdown-menu {
top: -10px !important;
left: -160% !important;
}
try adding this
.dropdown-menu {
left:auto;
right:100%;
top:0;
}
You could use css to achieve this.
I am currently on mobile but i believe it would go something like this. Try:
.dropdown-menu {
margin-left:30px;
margin-bottom:20px;
}
I should be something like this. You will now be able to show the opening on to your left.
Related
$(document).ready(function(){
$('.dropdown > button').mousedown(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseup(function(){
$(this).removeClass('redClass');
$('.dropdown').removeClass('redClass');
});
$('.dropdown > button').click(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseleave(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
})
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.redClass {
background: transparent;
border: 1px solid transparent;
}
.transparentClass{
background: transparent;
border: 1px solid transparent;
}
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>
</div>
I want to design a bootstrap drop down for my angular2 application.I am running into issues.I want a single drop down menu when the user clicks the caret only.But even if I click outside the caret the dropdown menu shows.Another issue is I want both the menu and sub menu to have transparent color whether hovered or clicked.I tried the below css for hover and active,it didn't work.
.dropdown > button {
background-color: transparent;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>
I think there is no way to select parent of an element with css. You can use jQuery to do that:
$(document).ready(function(){
$('.dropdown > button').mousedown(function(){
$(this).addClass('redClass');
$('.dropdown').addClass('redClass');
});
$('.dropdown > button').mouseup(function(){
$(this).removeClass('redClass');
$('.dropdown').removeClass('redClass');
});
})
.redClass {
background: #f00;
}
.transparentClass{
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>About us</li>
</ul>
</div>
I am building an app with Bootstrap 3.3 and Bootstrap Material Design framework. I am trying to make a floating action button that opens when you click it.
In an attempt to do this, I've created this Bootply, which has the following code:
<div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
<li><i class="material-icons">clear</i></li>
</ul>
</div>
The buttons works, but it doesn't look right. There are two issues that are driving me nuts. First, the popup menu isn't transparent. There is like a border and shadow that I can't seem to get rid of.
Second, I can't use the small version of the buttons as shown in the Floating action buttons section of the Bootstrap Material Design framework page. I'm not sure what I'm doing wrong.
So the .dropdown-menu in bootstrap CSS has by default box-shadow and border, which you have to reset it in order to make it transparent.
Plus in your Bootply it's not applying the Material Design Icons, because you didn't link the fonts.
Regarding small icons, add .btn-group-sm to .btn-group
Here is a working SNIPPET with examples for every sizes.
.floating-action-button {
position: relative;
top: 100px;
margin-left: 50px;
}
ul.dropdown-menu {
box-shadow: none;
border: 0;
min-width:0;
background:transparent
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div class="btn-group btn-group-lg dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div><div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
I wouldn't say that it is ideal, but the following seems to solve part of your problem.
.dropdown-menu {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
Unfortunately, I was not able to figure out what the material-icons class didn't work. Hopefully this answer will help you get closer to a solution.
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;
}