The <hr> line in Bootstrap is placed in a peculiar manner

Take a look at the fiddle here: https://jsfiddle.net/mv5ut6sw/

On my website, I have a set of links displayed in a <div> at the top. To visually separate these links from the rest of the page, I want to add horizontal lines above and below the containing <div>. Here is a simple example:

<hr>
<div style="float:left; width:100%">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link1">Link1</a></li>
        <li><a href="/link2">Link2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link3">Link3</a></li>
        <li><a href="/link4">Link4</a></li>
      </ul>
    </div>
</div>
<hr>

I am using bootstrap to enhance the appearance of the page. However, without bootstrap, the horizontal lines display as expected - one above and one below the link section. With bootstrap, both lines appear above the link section only.

I'm unsure about how to solve this issue without making changes to the bootstrap code itself. Is there any inline CSS that could help correct this odd placement?

htmlcssbootstrap-4

Answer №1

One reason for the issue is that floats remove elements from the flow. To resolve this, you can clear the float value using clear:both or by applying overflow:hidden in the parent div.

If you are already using bootstrap4, there may not be a need to use floats. Instead, you can simply utilize the d-flex class on the parent div.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<body>
  <h3 style="background-color: lightgray; height: 40px; padding: 2px">
    Ye old title
  </h3>
  <hr>
  <div class="d-flex">
    <ul>
      <li><a href="/go/entry">Race Entry</a></li>
      <li><a href="/go">Start</a></li>
      <li><a href="/go/transfer">Position Transfer</a></li>
      <li><a href="/contracts">Contracts</a></li>
    </ul>
    <ul>
      <li><a href="/statement">Statements</a></li>
      <li><a href="/position">Race Position</a></li>
      <li><a href="/firm">Advertising Firm</a></li>
    </ul>
    <ul>
      <li><a href="/report1">Report1</a></li>
      <li><a href="/report2">Report2</a></li>
    </ul>
    <ul>
      <li><a href="/settleit">Settle it!</a></li>
      <li><a href="/upload">Upload</a></li>
      <li><a href="/search">Search</a></li>
    </ul>
  </div>
  <hr>
</body>

Answer №2

"Is there a way to add inline CSS to adjust the strange positioning?"

The issue is caused by the floats. Simply clear the last <hr>.

<hr style="clear:both;">

https://jsfiddle.net/s9L0Lf9b/

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
   Ye old title
</h3>
<hr>
  <div style="float:left; width:100%;">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/go/entry">Race Entry</a></li>
        <li><a href="/go">Start</a></li>
        <li><a href="/go/transfer">Position Transfer</a></li>
        <li><a href="/contracts">Contracts</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/statement">Statements</a></li>
        <li><a href="/position">Race Position</a></li>
        <li><a href="/firm">Advertising Firm</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/report1">Report1</a></li>
        <li><a href="/report2">Report2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/settleit">Settle it!</a></li>
        <li><a href="/upload">Upload</a></li>
        <li><a href="/search">Search</a></li>
      </ul>
    </div>
  </div>
<hr style="clear:both;">
  </body>

"The float CSS property determines that an element should be removed from the regular flow and positioned on the left or right side of its container, allowing text and inline elements to wrap around it." __ from MDN posted on a related question

P.S. - Using floats is unnecessary with Bootstrap 4.

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

Conceal button divider on pager in Jqgrid

Within my grid setup, there are 3 buttons placed in the pager section: 'Refresh', 'Constution', and 'Developed'. These buttons are separated by two vertical navSeparators. Upon grid load, the 'Developed' button is hi ...

javascriptjqueryhtmlcssjqgrid

Guide on restricting the character count and displaying the leftover characters using PHP with Ajax

I've been working on implementing a feature to display the remaining characters in a PHP AJAX call. I was successful using JavaScript, but I'm having trouble doing it with AJAX in PHP. Can someone provide assistance? <script type="text/javasc ...

javascriptphphtmlajax

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

When attempting to post data directly using templateDrivenForm and retrieve data from Firebase, I encountered the following type error message. Here are the relevant parts of my code: // Posting data directly using submitButton from templateDrivenForm onC ...

javahtmlcssangulartypescript

Ensuring texture consistency for scene backgrounds in three.js

I am facing an issue with adding a background to a scene using a PNG image of 2k resolution. The background appears correctly sized on PC, but on mobile devices, it looks disproportionated. Here is the code snippet I am using: var texture = THREE.ImageUti ...

javascriptcssimagethree.jstextures

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction

We are currently working on a screen that requires the following development: This screen will have the following features: When clicking on a button, the fields should become editable. In the image provided, there is some repeated data, but in our case, ...

javascripthtmlangular

Load JavaScript files in order within the <body> tag and trigger a callback function when all files have

Currently, my website (which is actually a Cordova/Phonegap app) has the following scripts in the <head>: <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="appPolyfills.js"></script> ...

javascriptjqueryhtml

JavaScript unable to dynamically change CSS styles

I've been struggling to get the color updates working for a while now. My suspicion is that my string return may be invalid, causing the issue. I'm aiming to convert hours, minutes, and seconds into hexadecimal values, but it seems to be failing ...

javascripthtmlcsshex

I decided to uninstall Bootstrap, but now I find myself unable to make any CSS changes

After attempting to uninstall Bootstrap, my application.css no longer seems to have any effect on my app. Any suggestions on how to resolve this issue? Here is a breakdown of the steps I took that led to this problem: - Removed require bootstrap from app ...

cssruby-on-railstwitter-bootstrapruby-on-rails-4

What is the best way to mirror an image using CSS3?

I'm looking to create a minimalist front page for my wife's jewelry website. I envision a simple layout with a blurred background and a sleek title at the top. In the center of the page, there will be several sections dedicated to different types ...

htmlcss

Leveraging retrieved data for conducting further JavaScript assessments through ajax

I have a mail.php file that is triggered by an ajax script. The purpose of the mail.php file is to conduct server-side validation and, if successful, send an email using mail() along with the data received from the ajax request. Now, I am looking to take ...

phpjqueryhtmlajaxemail

Having Trouble Opening Bootstrap 4 Modal with a Click?

I'm having trouble getting my modal to open. I've tried using the basic HTML code from the Bootstrap 4 site and also added some Javascript, but it's not working. I can't seem to figure out what I'm doing wrong. Any assistance would ...

javascriptjquerytwitter-bootstrapbootstrap-modalbootstrap-4

Loading HTML dynamically

Currently, I am working with node.js, express, and handlebars. When passing JSON data via res.render() to handlebars (hbs), I use {{#each dataJson}} to loop through the data and display it. However, if my JSON file had a large number of entries, loading t ...

htmlnode.jsjsonexpresshandlebars.js

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

javascriptjqueryhtmlcss

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

javascriptjqueryhtmlcssparallax

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Having some trouble closing a Bootstrap alert automatically on my new site built using the Bootstrap Framework. The issue arises when trying to close the alert after a certain amount of time. On the main page of the site, there is a modal login form. When ...

javascriptphpjqueryhtmltwitter-bootstrap

Discover the technique for combining three different text colors within one span element without resorting to the <font> tag

Is it possible to incorporate three different colors of text (details-red, Enter-blue, here-yellow) within a single span without utilizing the <font> tag? <span>Details Enter Here</span> ...

jqueryhtmlcss

Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying. The root cause of this problem lies in the fact that I am developing a back-end system for a website ...

c#cssasp.netgridview

Outline of a Bootstrap row

I am trying to create a row layout where the background extends beyond the designated row area. The desired design is shown in the image, with an additional white space before the actual text of the row. However, when I attempt to start a new row and set ...

csstwitter-bootstrapbootstrap-4

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference: .gallery { display: ...

htmlcss

Implementing a toggleable light and dark mode feature in Bootstrap 4 with a simple checkbox

Is it possible to link a checkbox's boolean value to a table's class in order to enable dark mode when checked? I attempted the following: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="styleshee ...

angularbootstrap-4