Is there a way to move the <hr> element closer to the content in the header section?

I am looking to move the

closer to the content in the header. I attempted using position-absolute but the
disappeared. This marks my inaugural project with bootstrap.

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


<!--Body -->
<header class="header row">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
    <div class="col-10 row">
      <h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
      <div class="col-3 px-0">
        <div class="float-end d-flex justify-content-between">
          <i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
          <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
              <img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
              <span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
            </a>
            <div class="dropdown-menu bg-transparent border-0">
              <a href="#" class="dropdown-item">My Profile</a>
              <a href="#" class="dropdown-item">Settings</a>
              <a href="#" class="dropdown-item">Log Out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="height:1px;color:#1968B2;">
</header>

htmlcssbootstrap-5

Answer №1

<hr style="height:1px;color:#1968B2; margin-top: -4px">

Feel free to modify the margin top as needed

Answer №2

Consider using a new CSS class or the ::after pseudo-element instead of the <hr> tag.

<div class="content section hr-border">

.hr-border {
    border-top: 1px solid gray;
}

OR

.hr-border::after {
    border-top: 1px solid gray;
}

Answer №3

A quick method to style the hr element with a class named "bar"

<hr class="bar" style="height:1px;color:#1968B2;">

Then, in your CSS file, define the styles for the "bar" class:

 .bar {
   transform: translateY(-10px);
 }

You can adjust the values as needed, using pixels or percentages

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

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

javascripthtmlflexbox

Setting a minimum width for a single column in Bootstrap 4

After implementing a basic grid-based layout using Bootstrap 4, I encountered a challenge with the responsiveness of my columns. My layout consists of two columns: Left and Right. The left column is defined as div.col-12.col-md-5, while the right column i ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

What is the best way to resize images while also maintaining their ability to transition on hover?

Having an interesting dilemma here.. I'm trying to utilize this CSS code: .custom-forums { height: auto; width: 100%; border-image-source:transparent url("../images/forums.png") center top no-repeat; } in combination with: .custom-forum ...

javascriptjqueryhtmlcssimage

Tips for submitting an e-mail through an HTML form with the help of Node.js and Gulp

Today, I've been tackling the challenge of creating an HTML contact form that can send an email using Node.js and Gulp. However, I'm struggling to find a solution. Using a relative path to a simple .PHP file doesn't seem to be working, so it ...

javascripthtmlnode.jsnpmgulp

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

I have a question regarding creating a dynamically filling rounded button. I have successfully created an inner div inside the button with absolute positioning at the bottom. It works perfectly on Chrome webview, but I'm facing issues on Android 4.1. ...

androidcssangularjsionic-framework

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an i ...

javascripthtmlcss

The @Html.Label feature fails to appear when the content includes a period (.) - Utilizing Bootstrap with MVC Razor

I am dynamically populating label text from a database source <div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11"> @Html.Label(@Model.Questions[i].DataText + ": ", new { @for = "dd" + @Model.Questions[i].Data ...

c#htmlasp.net-mvcrazorbootstrap-4

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

htmlcsswidth

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...

javascripthtmlcssinternet-explorer

Update the image links to automatically refresh every half a second based on the values inputted in the text bars

Is there a better and simpler way to define AAAAAAAAAA, BBBBBBBBBB, and CCCCCCCCCC using the links provided in the text bars named chart1, chart2, and chart3? This learning project is being done through Notepad++ for personal use only, with no need to sa ...

javascripthtmlimagesrc

Python tutorial: Executing onclick values with a click

I'm currently working on writing some Selenium Python code and I have a question. The website I am testing has multiple time slots available, and I am attempting to simulate a mouse click specifically geared towards the 8:30-11:30 timeslot. Below is ...

pythonhtmlpython-3.xseleniumselenium-webdriver

What are the top methods for interacting between Server APIs and Client-Side JavaScript?

Presently, I am utilizing setTimeout() to pause a for loop on a vast list in order to apply some styling to the page. For example, For example: How I utilize setTimeOut: I use setTimeout() to add images, text and css progress bars (Why doesn't Prog ...

javascriptphpjquerycssajax

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Sorting data on-the-fly using an HTML Select drop-down menu

Looking for a way to dynamically sort data from a JavaScript object based on the user's selected option. If the user chooses ID, the data should be sorted by ID, and the same goes for Name. I've created a function and attached an onchange method ...

javascriptjqueryhtml

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

htmlcsstwitter-bootstrap

Implementing a vertical tabindex change in Material UI Dialogue table

My material UI dialogue contains a table: <Dialog open={open} onClose={handleClose} maxWidth={'xl'} aria-labelledby='scroll-dialog-title' aria-describedby='scroll-dialog-description' disa ...

javascriptcssreactjsmaterial-ui

Preserving distance between absolute elements

I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfor ...

jquerycssanimation

Location of Custom HTML Widget in Django-Dashing

I've encountered a dilemma while using the Django-Dashing framework, specifically regarding the placement of my HTML file for a custom widget. I have meticulously configured the code in my dashboard.html file to ensure proper loading. {% extends &apo ...

javascripthtmldjangodashingrivets.js

Guide on fetching and parsing JSON data in jQuery by utilizing a URL

As a newcomer to jquery, I am struggling to understand and parse the json format. In my icenium project, I have included this JavaScript function in my js folder but it doesn't seem to be functioning properly. $(document).ready(function () { ...

javajqueryhtml

Is there a way to trigger validation with a disabled property?

My form element is set up like this: <input type="text" id="country" formControlName="Country" /> The form group looks like this: this.myForm = this.formbuilder.group({ 'Country': [{ value: this.user.Country, disabled: this.SomeProperty= ...

htmlangulartypescript