Is there a predefined horizontal divider in Bootstrap 4? I currently have this:
<style type="text/css>
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
However, I would prefer to utilize the existing Bootstrap CSS for this purpose. I have searched through the documentation but couldn't find it, perhaps I overlooked something.
Did you know that HTML already comes with a convenient horizontal divider called <hr/> (also known as "horizontal rule")? When styled with Bootstrap, it looks like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
If you want to enhance the styling further, you can easily link to Bootstrap's CSS file like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
Some text
<hr/>
More text
</p>Bootstrap 4 offers a predefined CSS style for the standard HTML horizontal divider <hr />, making it easy to use.
If you need to adjust margins, Bootstrap provides handy spacing utilities such as mt for margin top, mb for margin bottom, and my for both top and bottom margins. The numerical values from 1 to 5 represent different levels of spacing, from small to large. Here's an example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-12"/>
<!-- This is similar to -->
<hr class="mt-3 mb-3"/>In the past, I used to create a custom div with border-top like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="border-top my-3"></div>However, this approach was cumbersome and could lead to issues. It's much simpler and more effective to just use <hr />.
Creating Dividers in Bootstrap 4
<hr> can be used to create a simple divider in Bootstrap 4. However, for dividers with text in the middle, you can use the following code snippet:
<div class="row">
<div class="col"><hr></div>
<div class="col-auto">OR</div>
<div class="col"><hr></div>
</div>
When it comes to dropdowns, the answer is a resounding yes:
Explore more about Bootstrap dropdowns here
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
To create lines in Bootstrap v4:
For a slim line, use the following code snippet:
<div class="line"></div>
If you want a slightly thicker line, try this:
<div class="line py-1 bg-light"></div>
And for a bold line, use:
<div class="line py-1 bg-dark"><hr></div>
To give some extra spacing to the <hr> element, you can make use of the mt and mb spacing utilities as shown below:
<hr class="mt-5 mb-5">
For more information on Bootstrap's spacing utilities, visit: https://getbootstrap.com/docs/4.3/utilities/spacing/
Check out these unique utility classes:
.style1 {
border-top: 2px dashed #999;
}
.style2 {
border-top: 2px dotted #999;
}
.style3 {
border-top: 2px solid #999;
}
.style4 {
position: relative;
border: none;
height: 1px;
background: #999;
}
.style4::before {
content: attr(data-content);
display: inline-block;
background: #fff;
font-weight: bold;
font-size: 0.85rem;
color: #999;
border-radius: 30rem;
padding: 0.2rem 2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
min-height: 100vh;
background-color: #fff;
color: #333;
}
.text-uppercase {
letter-spacing: .1em;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container py-5">
<!-- For Demo Purpose -->
<header class="py-5 text-center">
<h1 class="display-4">Bootstrap Divider</h1>
<p class="lead mb-0">Some divider variants using <hr> element. </p>
</header>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="mb-4">
<h6 class=" text-uppercase">Dashed</h6>
<!-- Dashed divider -->
<hr class="style1">
</div>
<div class="mb-4">
<h6 class=" text-uppercase">Dotted</h6>
<!-- Dotted divider -->
<hr class="style2">
</div>
<div class="mb-4">
<h6 class="text-uppercase">Solid</h6>
<!-- Solid divider -->
<hr class="style3">
</div>
<div class="mb-4">
<h6 class=" text-uppercase">Text content</h6>
<!-- Gradient divider -->
<hr data-content="AND" class="style4">
</div>
</div>
</div>
</div>In the latest version of Bootstrap, you have the ability to create a design like the following:
<div class="py-2 my-1 text-center position-relative mx-2">
<div class="position-absolute w-100 top-50 start-50 translate-middle" style="z-index: 2">
<span class="d-inline-block bg-white px-2 text-muted">or</span>
</div>
<div class="position-absolute w-100 top-50 start-0 border-muted border-top"></div>
</div>
<div class="dropdown">
<button data-toggle="dropdown">
Click Me
</button>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li class="dropdown-divider"></li>
<li>Item C</li>
</ul>
</div>
This is an example code for creating a horizontal divider using Bootstrap 4. Here is how the output looks:
The class "dropdown-divider" is used in Bootstrap 4, while the class "divider" is used in Bootstrap 3 to create horizontal dividers.
<div class="input-group col-12">
<hr>
</div>This code snippet is being utilized in my current project:
Sample HTML:
<hr class="my-3 dividerClass"/>
Related CSS:
.dividerClass{
border-top-color: #999
}
This is how I implemented it using Express.js and Pug:
Cascading Style Sheets (CSS):
.divider-text {
position: relative;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
.divider-text span {
padding: 7px;
font-size: 12px;
position: relative;
z-index: 2;
}
.divider-text:after {
content: "";
position: absolute;
width: 100%;
border-bottom: 1px solid #ddd;
top: 55%;
left: 0;
z-index: 1;
}
PUG code:
p.divider-text
span.bg-light OR
When rendered, the PUG code generates the following HTML:
HTML Output:
<p class="divider-text"><span class="bg-light">OR</span></p>
Visual Representation:
updated to bootstrap version 5.2
<div class="container"></div>
Working on my latest Wordpress theme project, I have integrated the Bootstrap framework. One of the styles included in the Bootstrap CSS file is: input, textarea, .uneditable-input { width: 206px; } This style rule is causing issues with how my search ...
Is it possible to use mouse position on screen to control a video? Imagine, if I have my cursor on the left side of the screen, the video starts from the first frame. But as I move my cursor to the right side, the video progresses until the cursor reaches ...
I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...
I need to use a button to add "OK" in the Status column of table tblItem, which is initially empty. How can I achieve this using JavaScript or JQuery? The table has an id of tblItem Id Item Price Status 1 A 15 2 B 20 3 C ...
I am facing an issue with customizing the styles in my Material UI theme in React. Specifically, I am trying to modify the border of the columnsContainer but it doesn't seem to work, only the root style is having an effect. Take a look at this Codesa ...
I tried searching on Google for a solution, but I couldn't find anything! Is there a trick or library available to avoid repeating CSS extensions for browsers? Instead of using -webkit-, -moz-, and -o- prefixes? -webkit-animation: NAME-YOUR-ANIMATI ...
When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...
A demonstration of JavaScript is utilized for deleting an employee in this scenario... <script type="text/javascript"> function deleteEmployee(employee) { var confirmation = confirm('Are you sure?'); if(confirmation) { ...
Greetings, this is my initial post so please forgive me if I have missed any important information. I'm currently in the process of creating a webpage using react. My goal is to display content on the page by iterating over a relatively straightforwa ...
I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...
Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...
Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...
I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...
I came across a cool tutorial on animating progress bars: The only issue was that the progress bar didn't utilize jquery, and there wasn't information on linking multiple buttons to it. After some searching, I found another tutorial that address ...
I've been trying to display the daily verse from ourmanna.com API using a combination of HTML and JS code, but I'm encountering an issue where the verse doesn't always show up. I'm not sure if this problem is on the side of their API or ...
As a beginner in html and css, I am facing an issue with displaying two h3 elements on the same line. I have tried using display:inline-block, but it's not working as expected. You can check out an example on jsfiddle here. I have provided 4 different ...
/* Styles for alignment */ .floatsidebar { height: 100%; float: left; overflow: hidden; width: 30px; line-height: 1.5; } .vertical-text { height: 100%; display: inline-block; white-space: nowrap; transform: translate(0, 100%) rotate(-90 ...
My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...
I am having trouble getting an image from a JSON to display on an Ionic card. Although I can see the JSON response in the console log, the image is not showing up on the card, leaving it blank. It seems like I'm making a mistake in the HTML code. Any ...
I'm having trouble with the timer function when a button is clicked. The startpause() method sets the start and stop timers, but when I click the button rapidly multiple times, the timer starts to jump by 2-3 seconds. It seems like more than one timer ...