How can I add these two lines using Bootstrap?-CodePudding

How can I add these two lines using Bootstrap? I'm trying to make a header like this . A TITLE having two blank borders in both sides in top and bottom. Is it possible to make with Bootstrap? I'm a noob lol.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<div >
  <hr >
  <div >HEADER</div>
  <hr >
</div>

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div ></div>
    <div >HEADER</div>
    <div ></div>
</div>

CodePudding user response：

the flex display option allows for the automatic alignment to the right and left of the text using flex-grow: 1 on the child-elements. Using this on 2 elements surrounding a third also centers this third one. You may specify a width on one of the growing ones to get an offset header.

Note that bootstraps 'row' class also uses display: flex.

Move the border by applying margin-tops as per usual in to fine-tune their vertical alignment. Preserve the same height of the elements for aligned borders (e.g. use h1 on both to apply the same height).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div ></div>
    <div >HEADER</div>
    <div ></div>
</div>

CodePudding user response：

You can get close using flex layout and margins. Some tweaking may be needed due to 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <hr >
  <div >HEADER</div>
  <hr >
</div>

CodePudding user response：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
    <span ></span>
    <h1 >HEADER</h1>
    <span ></span>
</div>