Title with moderate underline decoration - Bootstrap

Can Bootstrap be used to add a border bottom with a width of 3rem (for example) and specify the color in the tag using a class? Here is an example:

.half-title:after{
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .75rem;
    background: Red;
}

<h1 class="half-title">THIS IS A TITLE</h1>

That's good, but I'd like to achieve this instead:

.half-title:after{
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .75rem;
}

<h1 class="half-title bg-red">THIS IS A TITLE</h1>

Is it possible to achieve this? Thank you.

https://jsfiddle.net/fekula/m3ydro1q/1/

javascriptcsstwitter-bootstrapbootstrap-4

Answer №1

Special thanks to focus.style for the valuable suggestion on utilizing code snippets to enhance the demonstration of results.

To improve the presentation, consider replacing the background-color with a border for the underline. This modification will allow you to leverage Bootstrap classes to customize the color of the underline.

.half-title:after{
    border: solid 4px transparent;
    border-color: inherit;
    content: '';
    display: block;
    height: 0;
    margin-top: .75rem;
    width: 3rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />

<h1 class="half-title border-default">THIS IS A TITLE</h1>

<h1 class="half-title border-info">THIS IS A TITLE</h1>

<h1 class="half-title border-warning">THIS IS A TITLE</h1>

<h1 class="half-title border-danger">THIS IS A TITLE</h1>

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

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Is there a reliable way to determine the width and height of the page content-block-inner, excluding the navbar and toolbar? This measurement can vary across different devices and operating systems. I attempted to assign an id to the content-block-inner a ...

javascriptjqueryhtmlcsshtml-framework-7

Exploring Vue's feature of passing props and emitting events within nested components

Within my coding project, I am facing the challenge of properly implementing a parent component containing a form that includes a birthday component. This birthday component consists of two separate components within it. My task is to effectively pass prop ...

javascriptvue.jsvuejs2vue-props

After being redirected from another page using history() in React, the state is initially set to null but later gets updated to the correct value - Firebase integration

After logging in and being redirected to the profile page, I encounter an error that says 'Unhandled Rejection (TypeError): Cannot read property 'email' of null'. How can I ensure that the state is set before proceeding with any additio ...

javascriptreactjsfirebase

Delivering objects from controller in AngularJS

I'm currently working on a project where I need to retrieve objects from the controller. Here's a snippet of my code: score.component.js: angular.module('score').component('score',{ templateUrl : 'app/score/score.t ...

javascriptangularjs

String passed instead of JSON in Ext JS grid sorting

I encountered an issue while attempting to incorporate server-side sorting with Sencha Ext JS. The JSON paging section appears correct, but the sort property is defined as a String rather than an Array: Actual: {"page":1,"start":0,"limit":50,"sort":"[{&b ...

javascriptjsonextjs

Creating a JSON structure using an array in Typescript

Here is an example of my array structure: [ { "detail": "item1", "status": "active", "data": "item1_data" }, { "detail": "item2", "status": ...

javascriptarraysjsontypescript

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

I have constructed a panel that adjusts its size based on the device's screen using responsive design techniques. The code for this panel is as follows: <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-for ...

jqueryhtmlcssjquery-mobilejquery-mobile-panel

What is the best way to effectively link promise calls that rely on each other?

Here is the code snippet I am currently working with: const request = require('request-promise'); request(validateEmailOptions).then(function(result) { if (result.valid) { request(createUserOptions).then(function (response) { if (re ...

javascriptnode.jspromisebluebird

Adjusting widths of strokes in React Native Vector Icons

I selected an icon from the react-native-vector-icon library. For instance, let's use featherIcons. How can I include a stroke-width property to the react-native-vector-icons package? import FeatherIcon from 'react-native-vector-icons/Feather&ap ...

javascriptreactjsreact-nativereact-native-vector-icons

It seems that there is a null value being returned in the midst of the

I have developed a model using express. While setting this in one function, it returns null in another function, forcing me to use return. What is the proper method to handle this situation? const Seat = function(seat) { this.seat = seat.seat; this. ...

javascriptexpress

"Complete with Style: Expand Your Horizons with Material-UI

The Autocomplete feature in Material UI is not expanding to the full width of the TextField element. Any suggestions on how to fix this issue? https://i.sstatic.net/3ccdp.png https://i.sstatic.net/KdkrO.png ...

javascriptreactjsmaterial-ui

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Spinning a rectangular grid with JavaScript

I am currently developing my own version of Tetris. My main focus at the moment is creating a function that can rotate a 2D variable array by 90 degrees (or -90). For instance, if we have an array like: "-T-", "TTT" The expected outpu ...

javascriptarraysecmascript-5

Tips for eliminating duplicate entries in ag grid using Angular

Is there a way to eliminate the recurring assetCode entries in ag grid? The PRN and PRN1 values seem to be repeating unnecessarily. Check out the code below: list.component.ts ngOnInit() { this.rowData.push( { 'code': 'Machi ...

javascriptangularag-grid

Refreshing the entire page upon modifying a single state

I am currently in the process of constructing a page that includes numerous Charts, and I am utilizing a Material UI menu to switch between graphs. Each time I click on a new MenuItem, it alters my state and presents a new array of components. The pr ...

javascriptreactjsreact-hooksmaterial-ui

Disable object rotation when hovering the mouse over it in three.js

I've created a function to prevent the rotation of a three.js object when the mouse hovers over it. function onDocumentMouseUp( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / w ...

javascriptthree.js

Exploring the World of Dynamic Table ID Access in Rails 5 with Coffeescript

Within my Index view, I have a table that I want to dynamically populate with an ID. This is what I've attempted so far: id="table_<%= @controller_name %>" The method in my controller looks like this: def get_controller_name @controller_nam ...

javascriptruby-on-railscoffeescript

Unable to execute AJAX POST request

https://i.stack.imgur.com/JqG7c.pngI have a JSON dataset like the one below: [ { "Password": "tedd", "Username": "john", "status": true } ] I need to consume this data using a POST method <label for="Username">Username:</label& ...

javascriptjqueryjsonajax

issues with updating a MongoDB collection

One challenge I'm facing with my social media app is that I have two separate collections - one for users and the other for user posts. When I update information in a user's collection, it should also reflect in the corresponding posts (as the po ...

javascriptmongodbexpressmongooseupdates

Set the mesh position in Three.js to the coordinates 0,0,0

I'm currently working on positioning a basic cube at coordinates 0,0,0. When I try to position the cube at 0,0,0, I end up with this outcome: https://i.sstatic.net/S2zom.png However, this is not the desired result. Here is what I am aiming for: http ...

javascriptthree.js