I want to create drop up menu with split button class I am getting dropdown menu instead of drop up.
Iam writing the following code snippet.
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br/>
<div class="dropup">
<div class="btn-group">
<button type="button" class="btn btn-primary " >Dropup button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>
</div>
You just need to add one class dropup in your "btn-group" div. See below updated html.
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br/>
<div class="btn-group dropup">
<button type="button" class="btn btn-primary " >Dropup button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Related
I'm currently using bootstrap 4.0. The dropdown menu is at the top right corner of the screen. When the user clicks on the drop down menu, The menu makes the page expand slightly to the right so it shows white space right next to the nav bar.
This is what it looks like:
This is the code that I'm using:
<div class="dropdown dropdown-left">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
Use this code:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
This is how you do that in BS 4:
Documentation
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
You need to add the alignment class to the .dropdown-menu instead of the container .dropdown element. And the class to add to right align a menu should be .dropdown-menu-right as mentioned in the docs.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
I want to make responsive navbar dropdown that when the website open in mobile the dropdown menu full screen. But when i try to make it to the right with "right: 0" it just go to the right of the toogle button. How to make it go to the right of screen and full screen?. I am use Bootstrap 4
<!-- Grup Tombol -->
<div class="col-6 col-sm-3 col-md-3 col-lg-2 d-flex align-items-center justify-content-end custom-grup-tombol">
<div class="row">
<!-- Chat -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-comments"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Chat -->
<!-- Notif -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Lorem ipsum dolor sit amet consectetur adipisicing elit.</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Notif -->
<!-- User-->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End User-->
</div>
</div>
<!-- END Grup Tombol -->
The Picture
If I understood you correctly, these tips may help:
To make dropdown-menu attached right, you can add the following lines to your style:
.dropdown-menu {
top: calc(2em + 2rem + 2px) !important;
right: 0 !important;
}
.nav-item, .btn-group>.btn, .navbar, div.justify-content-end.custom-grup-tombol {
position: static !important;
}
Also, I recommend you to break a line of the dropdown-items with long text by adding
.dropdown-item {
white-space: normal;
}
Im trying to add input inside the button dropdown but it overlaps the dropdown's space. Please see my code below.
<ul class="dropdown-menu">
<li class="dropdown-header">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="input-sm form-control">
<button class="btn btn-sm btn-primary">Ok</button>
</div>
</div>
</div>
</li>
</ul>
Screenshot:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Sorry guys, I just changed my code to this:
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="input-group">
<input type="text" class="input-sm form-control" min="0">
<div class="input-group-btn">
<div class="btn-group">
<button class="btn btn-sm btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
I want to put the View button on left and the add button on right, but next to each other. The 2 buttons are in different divs. How can I do this?
Demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
The easy way is to add a float: left; to the first button container.
.btn-group {
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
You can put both buttons inside the same div, and use bootstrap classes "left" and "right":
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning right">Add</button>
</div>
You can use bootstrap row and column classes to avoid various resolution issues.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div id="rolecontainer">
<div id="addContainer">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
</div>
A better practice for this is to CSS both parent divs containing the button with
.div1, .div2 {
display: inline-block;
}
Having this will put them inline.
I need help to add dropdown input inside modal bootstrap. because when I try to put this below code:
<select>
<option>Categories</option>
</select>
inside modal bootstrap. there is nothing to show inside modal-body.
Please help me.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
You try the following
<link rel="stylesheet" property='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="alert-info">
The MainDropdown works as expected. A minor side note is that clicking directly on the checkbox keeps the dropdown open, whereas clicking on the "label" portion outside of the checkbox closes the dropdown. In either case, the checkbox is appropriately
toggled.
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MainDropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action long words to show content</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<label class="dropdown-item">
<input type="checkbox" name="test" value="1" /> Test</label>
</div>
</div>
<br/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert-danger">
The ModalDropdown seems to work for "a" tags. Clicking on the input checkbox directly will have the same behavior as MainDropdown in Chrome 56, but in Firefox 51 the menu will close. Clicking on the "label" portion outside of the checkbox will close the dropdown in either browser without toggling the checkbox state.
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ModalDropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action long words to show content</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<label class="dropdown-item">
<input type="checkbox" name="test" value="1" /> Test</label>
</div>
</div>
</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>