Opacity is a key feature of Bootstrap 5 background colors

I am currently facing a challenge with creating an OR divider using Bootstrap 5, as it seems to not display correctly when compared to Bootstrap 4. The text's background color also appears to have some transparency in my project.

Here is the code I am using:

<div class="or-line-block pt-2">
    <h6 class="text-center m-0"><span class="or-txt px-2">OR</span></h6>
    <hr class="or-line">
</div>

And here are the related CSS styles:

.or-txt{
    background-color: white;
}
.or-line{
    margin-top: -10px;
    border-color: rgba(#333, 0.1);
}

In Bootstrap 4, the divider appears like this:

https://i.sstatic.net/mza1n.png

But in Bootstrap 5, it looks like this:

https://i.sstatic.net/HlnyI.png

https://i.sstatic.net/D0Pr8.png

If you can identify the issue and provide assistance, it would be greatly appreciated.

htmlcssbootstrap-4opacitybootstrap-5

Answer №1

The reason for this is due to the recent update in bootstrap regarding the CSS for hr. They have incorporated opacity and made other CSS modifications. Make sure to include the following code snippet into your existing code:

hr {
    opacity: 1;
}

Answer №2

I was created in this manner

<div style="width: 100%; height: 20px; border-bottom: 1px solid darkgray; text-align: center">
    <span style="font-size: 20px; background-color: white; padding: 0 10px;">
      or<!--Padding is optional-->
    </span>
  </div>

Answer №3

A suggestion for improved functionality could be utilizing the ::before and ::after pseudo elements.

CSS

   .or-line::before{
      content: "---------"
   }

   .or-line::after{
      content: "---------"
   }

You can add any text to the content property to display it before and after the word "OR".

HTML

 <h6 class="or-line">OR</h6>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to transfer an array as a parameter from an Ipython notebook to an HTML file that includes specific javascript functions?

I have a unique HTML file named "file.html" that includes a distinctive JavaScript function described below: The Unique file.html <html> <head> </head> <script> function customFunction() { perform an action using ...

javascripthtmljupyter-notebook

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

currently experiencing layout discrepancies with Flexbox

Experimenting with flexbox has been challenging, but I am close to achieving my desired layout: Place a label in the top left of the first container Position a label in the top right of the first container Align a label in the bottom middle of the first ...

htmlcssflexbox

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

javascriptjquerycss

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss

Using the method window.open() will launch a new window instead of opening a new tab

When the page loads, I am using JavaScript to call window.open. window.open(url, "Test Page"); Initially, it opens a new Chrome window and displays the page. However, when I use the same JavaScript code after the page has loaded, it opens the page in a n ...

javascripthtml

Encountering a roadblock while trying to work with AngularJS Material radio buttons

In one of my projects, I have implemented a polling system where users can choose a question from a list and then proceed to the options page. On the options page, users can select their answer choices and submit their responses. The results are then displ ...

javascriptangularjshtmlmaterial-designangular-material

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

htmlcsstwitter-bootstrapbootstrap-4sass

Styling your printed documents in Next.js 10

Within my Next 10 application, I am able to bring in global styles by importing them in _app.js in the following manner: import 'assets/css/app.css' I want to incorporate a print stylesheet as well. Instead of using a @media print { } query with ...

cssnext.jsprint-style

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

javascripthtmlcss

Tips for Aligning Text Vertically in the Center of a Grid using Bootstrap 5

Currently using Bootstrap version 5.1.3 and here is a snippet of my HTML code: <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...

bootstrap-5

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: https://i.sstatic.net/5QFRx.jpg However, what ...

jqueryhtmlcssslick.js

What is preventing my h1 styles from being applied to an h1 element within a <section> tag?

I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...

htmlcss

Steps for inserting an additional header in an Angular table

https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...

javascripthtmlangular

Implementing a stylish gradient background with HTML 5 progress bar tag

I am trying to customize an HTML5 progress bar tag in a unique way: The background of the bar should have a gradient with a fixed width of 100%, but I want the gradient to only be visible where the value of the bar is... progress[value]::-webkit-progres ...

csshtmlstylesprogress-barlinear-gradients

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

javascriptajaxhtmlcanvas

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

Exporting Canvas data without the alpha channel

I am looking for a way to resize images that are uploaded in the browser. Currently, I am utilizing canvas to draw the image and then resize it using the result from the toDataURL method. A simplified version of the code (without the upload section) looks ...

javascripthtmlcanvasimage-resizingtodataurl

What is the process for adjusting the color of a div?

Is there a way to adjust the background color of a div when hovering over another div in HTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlcss

Clicking on the modal will trigger its closure

Is there a way to prevent Bootstrap 4 modal from closing when the user tries to leave the page but clicks on it instead? I have attempted various solutions from this platform, but none have worked for me. I am running out of ideas. This snippet shows my ...

jqueryhtmlbootstrap-4