-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Collapse
Bootstrap Collapse is a component that allows you to toggle the visibility of content, commonly used for hiding and showing large amounts of content or for creating an accordion effect in lists. It’s a versatile tool that can enhance the user experience by reducing the initial load of information presented. This component is particularly useful for FAQ sections, collapsible panels, or hiding and showing additional details.
Key Classes and Components of Bootstrap Collapse
– .collapse: The base class for the collapsible element. This class applies the collapsing behavior.
– .show: Adds to a collapsible element to make it visible by default.
– .collapsing: A temporary state applied during transitions.
– .navbar-toggler: Often used in conjunction with collapsible components in navigation bars.
– data-toggle=”collapse”: Attribute used in a button or link to control the collapse element.
– data-target or href: Specifies the ID of the element to be shown or hidden.
Examples of Bootstrap Collapse
Basic Collapse
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dropdown Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<button class=”btn btn-primary” type=”button” data-toggle=”collapse” data-target=”#collapseExample” aria-expanded=”false” aria-controls=”collapseExample”>
Link with href
</button>
<div class=”collapse” id=”collapseExample”>
<div class=”card card-body”>
Some placeholder content for the collapse component.
</div>
</div>
<!– Include jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<!– Include Popper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<!– Include Bootstrap JS –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
– This example demonstrates a basic collapsible element.
– Clicking the button toggles the visibility of the content within the `<div>` with `id=”collapseExample”`.
Accordion Example
<div id=”accordion”>
<div class=”card”>
<div class=”card-header” id=”headingOne”>
<h5 class=”mb-0″>
<button class=”btn btn-link” data-toggle=”collapse” data-target=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”>
Collapsible Group Item #1
</button>
</h5>
</div>
<div id=”collapseOne” class=”collapse show” aria-labelledby=”headingOne” data-parent=”#accordion”>
<div class=”card-body”>
Content for first panel
</div>
</div>
</div>
<!– Repeat for more collapsible items –>
</div>
– An accordion is a series of collapsible elements, in which only one item can be expanded at a time.
– The `data-parent` attribute is used to group collapsible items and ensure only one is open at a time.
Responsive Navbar with Collapse
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dropdown Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home</a>
</li>
<!– More nav items –>
</ul>
</div>
</nav>
<!– Include jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<!– Include Popper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<!– Include Bootstrap JS –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Condensed Table
Bootstrap offers a .table-sm class to make tables more compact. This class reduces the padding inside table cells, making the table more condensed and suitable for displaying large datasets or for use in areas with limited space.
Applying Condensed Table Styling in Bootstrap
The .table-sm Class
- The .table-sm class, when combined with the .table class, decreases the padding in table cells, resulting in a more compact table.
- This class can be particularly beneficial for tables that need to display a lot of data without taking up too much space.
<table class=”table table-sm”>
<thead>
<tr>
<th scope=”col”>Country</th>
<th scope=”col”>Capital</th>
<th scope=”col”>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>328.2 million</td>
</tr>
<tr>
<td>UK</td>
<td>London</td>
<td>66.65 million</td>
</tr>
</tbody>
</table>
Responsive Tables
To make a table responsive in Bootstrap, wrap it within a .table-responsive container. This container adds horizontal scrolling to the table on smaller screens, preventing the table from overflowing its parent container.
<div class=”table-responsive”>
<table class=”td”>
<thead>
<tr>
<th scope=”col”>Course</th>
<th scope=”col”>Instructor</th>
<th scope=”col”>Duration</th>
<th scope=”col”>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Development</td>
<td>Jane Roe</td>
<td>12 weeks</td>
<td>4.5</td>
</tr>
<tr>
<td>Data Science</td>
<td>John Smith</td>
<td>10 weeks</td>
<td>4.7</td>
</tr>
<tr>
<td>Graphic Design</td>
<td>Emma Johnson</td>
<td>8 weeks</td>
<td>4.8</td>
</tr>
</tbody>
</table>
</div>
– This snippet creates a responsive navbar with a collapsible menu, which is common in mobile-friendly designs.
– The menu items collapse into a toggleable dropdown on smaller screens.
Bootstrap Collapse is a highly useful component for managing large blocks of content, improving the organization of information on a webpage, and enhancing the overall user experience, especially in mobile-responsive designs.
