CSS to implement full width split dropdown button in Twitter Bootstrap
CSS Implementing a Full-Width Split Dropdown Button in Twitter Bootstrap
In this article, we’ll show you how to implement a full-width split dropdown button in Twitter Bootstrap using CSS.
Read more: CSS Tutorial
What is a Full-Width Split Dropdown Button
A full-width split dropdown button is a button displayed on a web page. When the user clicks it, a dropdown menu pops up, splitting the button’s width in two so that the dropdown menu fills the entire screen.
Basic Idea for Implementing a Full-Width Split Dropdown Button
The basic idea for implementing a full-width split dropdown button is to use Bootstrap’s CSS classes and JavaScript components, combined with custom CSS styles.
First, define a button in HTML, using Bootstrap’s button styles and assigning a unique ID. Then, define a dropdown menu below the button, using Bootstrap’s dropdown menu styles and linking it to the button via JavaScript components.
Finally, use custom CSS to split the button’s width in two and make the dropdown menu span the entire screen.
Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Width Split Dropdown Button</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
/* Custom styles */
.split-dropdown-button {
display: inline-block;
width: 100%;
}
.split-dropdown-button .dropdown-toggle {
width: 50%;
} .split-dropdown-button .dropdown-menu {
width: 100%;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="btn-group split-dropdown-button">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="split-dropdown-btn">
Split Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="split-dropdown-btn">
Option 1
Option 2
Option 3
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In the code above, we first import Bootstrap’s CSS and JavaScript files. Then, we add a custom CSS class, .split-dropdown-button, to the outer container of the button and dropdown menu and set its width to 100%.
To split the button’s width in two, we use another custom CSS class, .split-dropdown-button .dropdown-toggle, and set its width to 50%.
To make the drop-down menu’s width stretch to the entire screen, we use another custom CSS class: .split-dropdown-button .dropdown-menu and set its width to 100%. Set the left and right properties to 0 to center it.
Finally, using Bootstrap’s JavaScript components, we’ll connect the button to the dropdown menu and enable the button to show or hide the dropdown menu when clicked.
Summary
Using CSS and Bootstrap’s components, we can easily create a full-width split dropdown button. We used custom CSS to split the button’s width into two parts and used Bootstrap’s dropdown component to show and hide the dropdown menu. This effect can make your website look more beautiful and professional. I hope you found this article helpful!