How to draw a line according to screen weight in HTML

Question

How can I draw the line showing in the picture below?

my current page looks like this:

I want to add that line at the top with the same title (just to mention I'm using bootstrap 5)

<div class="container-fluid fixed-bottom" style="margin-bottom: 16px;">
  <div class="row align-items-center" style="margin-left: 196px; margin-right: 196px;">
    <div class="col align-items-center d-flex justify-content-center">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/business.png" width="56px" height="56px" />
        <p class="bottomText" style="color: white;">Business</p>
      </div>
    </div>
    <div class="col align-items-center d-flex justify-content-center">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/calculator.png" width="56px" height="56px" />
        <p class="bottomText" style="color: white;">Calculator</p>
      </div>
    </div>
    <div class="col align-items-center d-flex justify-content-center">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/oogPermits.png" width="56px" height="56px" />
        <p class="bottomText" style="color: white;">OOG Permits</p>
      </div>
    </div>
    <div class="col align-items-center d-flex justify-content-center">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/services.png" width="56px" height="56px" />
        <p class="bottomText" style="color: white;">Services</p>
      </div>
    </div>
    <div class="col align-items-center d-flex justify-content-center">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/career.png" width="56px" height="56px" />
        <p class="bottomText" style="color: white;">Career</p>
      </div>
    </div>
  </div>
</div>

Does this answer your question? [Add centered text to the middle of a horizontal rule](https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule) — markfila, Oct 20 '22 at 19:05

score 1 · Accepted Answer · answered Oct 20 '22 at 18:46

You can use flexbox. Then, you have to play with the borders. Here is an example

<html>
  <header>
    <meta charset="utf-8" />
    <title>Example App</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </header>

  <body>
    <div class="content d-flex justify-content-center">
      <div class="left-border align-self-center"></div>
      <div class="text">FAST NAVIGATOR</div>
      <div class="right-border align-self-center"></div>
    </div>
    <div class="text-center">Your content here</div>
  </body>
</html>

<style>
  .content {
    padding: 1rem;
  }
  .left-border {
    border: 2px solid black;
    width: 100%;
    height: 10px;
    border-bottom: none;
    border-right: none;
    background: transparent;
  }

  .text {
    font-size: 12px;
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
    margin-top:-8px;
  }

  .right-border {
    border: 2px solid black;
    width: 100%;
    height: 10px;
    border-bottom: none;
    border-left: none;
    background: transparent;
  }
</style>

score 1 · Answer 2 · answered Oct 20 '22 at 18:51

1

fieldset {
  padding: 0;
  height: 8px;
  border-bottom: none;
}

<fieldset>
  <legend align="center">Title</legend>
</fieldset>

answered Oct 20 '22 at 18:51

Andrei Fedorov

3,689
2
13
25

I didn't know this `fieldset` property. Is it better to use this method instead of another ? – Asmoth Oct 20 '22 at 19:16
1

@Asmoth You decide. My opinion is to let the browser do its job as much as possible. See how much code I have and how much code in you case. – Andrei Fedorov Oct 20 '22 at 19:31
Thank you, I will find out more about this method. Thank you for sharing – Asmoth Oct 20 '22 at 19:37

How to draw a line according to screen weight in HTML

2 Answers2