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.
Related
I have a table header with buttons, but the moment I add my dropdown button, it moves all of them around and makes them ugly to look at. This is my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
These are my other buttons:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
<?php endif; ?>
</div>
I want to put my dropdown next to the other buttons, but I'm guessing because it's a div and not a button they don't align properly?
When I put my dropdown in the same div as my buttons, the dropdown goes vertically above the other buttons.
Would appreciate some help!
You can use flex to align your element. like Bootstrap classes d-flex and justify-content-between. Wrap your content in above classes like below code snippet.
For more alignment options check bootstrap official docs
https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
<div>
<button type="submit" form="selecties"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<button type="submit" form="selecties"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
</div>
</div>
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>
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 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>
I don't know how to display it in a single line so what should be done? I tried giving display inline for id="search" , but it didn't work.
Thanks in advance.
<div class="row">
<div id="search">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Search by skills/titles">
</div>
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
<button type="button" class="btn btn-outline-danger">Find Jobs</button>
</div>
</div>
You should take a look into the Bootstrap Grid system, is very useful
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Option 1 </h1>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-6 col-xs-6">
<input type="text" class="form-control" id="test" placeholder="Search by skills/titles">
</div>
<div class="col-md-3 col-xs-3">
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="test1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
</div>
<div class="col-md-3 col-xs-3">
<button type="button" class="btn btn-outline-danger">Find Jobs</button>
</div>
</div>
</div>
<h1>Option 2 </h1>
<div class="row">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Search by skills/titles">
</div>
<div class="form-group">
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Find Jobs</button>
</div>
</form>
</div>
</div>
</body>
</html>