What is the best way to create horizontal lines that span multiple Bootstrap columns?

I am working with a Bootstrap grid that consists of three columns in a row. My goal is to add a line across all columns under every row of content written in the columns.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col">
    <div class="row">
      <p>Some Text</p>
    </div>
    <hr>
    <div class="row">
      <p>Some Text</p>
    </div>
  </div>
  <div class="col">
    <div class="row">
      <p>Some Text</p>
    </div>
    <hr>
    <div class="row">
      <p>Some Text</p>
    </div>
  </div>
  <div class="col">
    <div class="row">
      <p>Some Text</p>
    </div>
    <hr>
    <div class="row">
      <p>Some Text</p>
    </div>
  </div>
</div>

This is the current display:

Desired display:

htmlcssbootstrap-4

Answer №1

To add borders to your columns and rows in CSS, specify the border properties in the classes col and row, adjusting colors and sizes as needed.

Here is an example:

.col{
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.row {
 border-bottom: solid 1px blue;
}

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

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

javascriptcssanimationsvgfill

I'm having trouble with my code not fitting all screen resolutions. I usually code on a Macbook, but recently switched to a Windows computer and now everything is out of whack

$(function(){ $("#Welcome").typed({ strings: ["PROGRAMMERS / NETWORKERS"], typeSpeed: 60 }); }); html { background-color: mintcream; background-size: 100%; } /* Home */ .homeheader button { background-color: #4CAF450; top: ...

jqueryhtmlcss

Failure to load CSS and JavaScript files

I recently deployed my Symfony 4 application, but I'm encountering an issue where the app is not loading images, routes, CSS files, and JS files. I have already installed assets. Here is what I am seeing: Failed to load resource: the server responded ...

symfonybootstrap-4twigsymfony4

Issue with negative margin not functioning properly in Internet Explorer 7

My code snippet looks like this: <style> .earthlogo{float: right; margin: -270px 0px 0px 0px;} </style> <div class="banner"> <p>ENVISIONING A BETTER TOMORROW</p> <div class="earthlogo ...

cssinternet-explorer

Incorporate live data into a sample chart.js file within a Django template

I'm currently using the "start bootstrap4" template in my Django project. I need to customize the data displayed in a chart contained within the template by modifying the chart-pie-demo.js file. In my views.py file, I have defined the data that I wan ...

javascriptpythonhtmldjangochart.js

Retrieve a specific element using BeautifulSoup

Looking at this html structure found in a bs4.BeautifulSoup: <div class="bordered radius border-color-ui-2 bg-white h-100"> <a href="#" class="box-card-link-wishlist" role="button" aria-label="Adicion ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Displaying a few squares with Angular Material's mini buttons surrounding them

Problem with displaying squares when using Angular material mini buttons in my Angular 7 project. Any suggestions on how to fix this issue? Thanks. Please take a look at the issue below: https://i.sstatic.net/VaGDV.png Here is my code: component.html ...

cssangularangular-material

Discovering the center of an element and implementing a left float

I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...

javascriptjqueryhtmlcss

What are some ways to incorporate table pagination with next and previous buttons utilizing jQuery and Bootstrap?

Currently, I have a bootstrap table that contains 79 rows, but I am only displaying 10 rows at a time with the help of pagination. I have successfully implemented the pagination feature, but now I am looking to add previous and next buttons. How can I im ...

jquerypaginationbootstrap-4

Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...

javascriptcssreactjsmaterial-ui

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

javascriptcssreactjsmaterial-design

Is there a way to add a delay when opening all of the links on my web page

Has anyone experimented with implementing time delays on global links before? I am aiming to have all my links open with a delay in order to create a smoother transition between pages for an artistic touch. However, I seem to be encountering some issues ma ...

jqueryhtml

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

The navigation bar scrolling based on mouse position lacks smoothness and could use some enhancement

I'm currently working on adjusting the navigation bar based on the mouse position. It seems to be functioning, but I'm facing an issue with smoothing out the animation. When I stop moving the mouse to a certain point, there is a delay i ...

javascriptjqueryhtmlcsssmoothing

Resolving the Blank Space Problem in DataTable CSS Styling

I encountered an unusual issue while working with DataTable in my project. Here's a link to view my DataTable example I have also attached a picture illustrating the problem I am facing. Is there a way to remove the blank space containing filter but ...

jqueryhtmlcssdatatable

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

The usage of line breaks within the <textarea> and <pre> elements is crucial for maintaining the formatting of text

In this box, you can enter text. If you reach the end of the line with letters, it will automatically continue on a new line. Once you click on 'update details,' the letters will be saved in a database. https://i.sstatic.net/q2Y1Z.jpg On the &a ...

html

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Utilizing a for loop to iterate through data and make updates to a

My update code is functioning correctly for questions, but I am encountering issues when updating answers. Can anyone provide assistance on how to resolve this? Thank you in advance :) Here is the snippet of code from my form: <?php do { ?> <tr& ...

phphtmlmysqlfor-loop

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

phphtmljsondecodeexplode