What is the Bootstrap method for incorporating these two lines into the code?

Can someone please help me figure out how to use Bootstrap to create a header with a TITLE that has blank borders on the top and bottom? Is it possible to achieve this design with Bootstrap? I'm new to this, so any guidance would be greatly appreciated!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e607e62">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <hr class="bg-danger border-2 border-top border-danger">
  <div class="h1">HEADER</div>
  <hr class="bg-danger border-2 border-bottom border-danger">
</div>

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

csstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5651514a5a5a585a4a5e1b101e101c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="flex-fill border-top border-2 border-danger h1"></div>
    <div class="h1 text-center">HEADER</div>
    <div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>

Answer №2

When using the flex display option, you can automatically align text to the right and left by applying flex-grow: 1 to child elements. If you use this on two elements that surround a third element, it will center the third one. To create an offset header, you can specify a width on one of the growing elements.

It is worth noting that Bootstrap's 'row' class also utilizes display: flex.

To adjust the border position, you can use margin-top to fine-tune the vertical alignment. Make sure to keep the elements at the same height for aligned borders (for example, using h1 on both to ensure the same height).

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69388968894">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="flex-fill border-top border-2 border-danger h1"></div>
    <div class="h1">HEADER</div>
    <div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>

Answer №3

You can achieve a similar effect using the flex layout and adjusting the margins. Some fine-tuning may be necessary to accommodate the line height of the heading element.

body {
  padding: 30px;
}

.h1.lh-min {
  line-height: 24px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7b8a7ba">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="d-flex">
  <hr class="bg-danger border-2 border-top border-danger flex-grow-1 align-self-start m-0 mt-1">
  <div class="h1 lh-min m-0">HEADER</div>
  <hr class="bg-danger border-2 border-bottom border-danger flex-grow-1 align-self-end m-0">
</div>

Answer №4

In my latest project, I decided to use a unique combination of h1 tags within span tags, and I adjusted the size of the h1 to 3 out of 12.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c7768776a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
    <span class="col border-top border-5 border-dark"></span>
    <h1 class="col-3 text-center">HEADER</h1>
    <span class="col border-bottom border-5 border-dark"></span>
</div>

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 could be causing my Next.js layout to re-render?

I currently have a basic root layout set up in Nextjs (app router) that displays a navigation bar and the child components underneath it. ROOT LAYOUT import "./globals.css"; import type { Metadata } from "next"; import { Inter } from & ...

htmlcssreactjsnext.js

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss

Tips on controlling the color of an input field in a form using React

Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction: https://i.stack.imgur.com/FdNos.png Once the input field is clicked on, it changes to white as shown here: https://i.s ...

htmlcssformsinput-field

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

csssvg

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

htmlcsscss-tables

Fontawesome is unable to update the class due to the presence of invalid characters in the string

const toggleDarkOrLight = document.getElementsByTagName('i')[0]; var toggled = false; const toggleFunction = () => { if (toggled === false) { toggleDarkOrLight.classList.remove('fa fa-toggle-off'); toggleDarkOrLight.classLi ...

javascripthtmlcssfont-awesome

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

"Discover a unique online platform showcasing videos and images with a creative

I recently updated my personal website to showcase some of the tools I've developed through short looping videos. Initially, everything was working well with just images, but when I switched to videos, I encountered some unexpected behaviors. Interest ...

htmlcss

ReactJS Navbar component experiencing CSS hover bug

While developing a navbar component in React, I encountered an unexpected issue - the hover effect on my navigation links suddenly stopped working. Strangely enough, the cursor: pointer functionality still operates on my logo but not on the nav links durin ...

htmlcssreactjsweb-deploymentreact-component

Customizing background size for iOS devices

This morning, I delved into research on a particular issue. Currently, I am crafting a single-page website that heavily relies on images. While Safari is usually criticized for its quirky handling of background-attachment:fixed, it seems to be working fine ...

htmlioscssbackground-image

Having trouble vertically aligning text? Combining AngularJS, Bootstrap, and Flexbox can help!

I have spent a lot of time trying to understand why I am unable to vertically align the text inside these cells. I have tried multiple solutions: align-items: center; vertical-align: middle; justify-content: center; justify-items: center; Unfortunately, ...

htmlcssangularjstwitter-bootstrapflexbox

How can you convert label text to capitalize if the original text is in uppercase letters?

Is there a way to change a label text to capitalize if the label text itself is in uppercase? I attempted the following: <p class="capitalize">THIS IS SOME TEXT.</p> In addition, I added: p.capitalize { text-transform: capitalize; } Howeve ...

htmlcss

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

javascriptphphtmlcsslaravel

centering pictures vertically on my webpage

Below is the code I am currently working with. It displays an image on the left and a description with a button on the right, side-by-side within the "promo_box_wrapper" container. However, I'm struggling to vertically align the image within its surro ...

htmlcss

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...

javascripthtmlcssxpath

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...

cssreactjsmaterial-ui

Show the separation between columns in a bootstrap table

Can someone help me with setting up a cryptocurrency ticker display using Bootstrap? I want to add vertical lines between columns using border properties, but I'm not sure how to make the right side borders of the cells visible along rows. <!-- ...

htmlcssbootstrap-5

What is the best way to place an <a> tag and a <p> tag side by side in an HTML

I have a question on organizing this HTML code: <ol class="results-list"> <% @results.sort_by { rand }.each do |result| %> <li class="<%= 'checked-out' if result.catalog_item.library_status == 'Checked out&apos ...

htmlcss