A straight line segment separating two divisions horizontally

Looking to enhance the appearance of my colorful box created using bootstrap, I attempted to add a horizontal line spanning from left to right as shown in the second image. However, my approach of adding a new div element with a border did not result in fitting the entire width of the box.

https://i.sstatic.net/QUTlc.png

Fig: Image displaying border not fitting within the right container

https://i.sstatic.net/ONOLX.png

Fig: Expected outcome with the border fitting uniformly within the container

Below is the code snippet:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<br>
<br>
<div class="container" style="color:white;">
  <div>
    <div class="row row-eq-height">
      <div class="col-lg-5 col-md-5">
        ...
        (Remaining code)
        ...
      </div>
    </div>
  </div>
  <div style="padding-top:50px;">
    ...
  </div>

</div>

Link to CodePen example

Issue encountered: The border fails to fit correctly within the right container.

<div class="col-md-12" style="border-bottom:1px solid red; "></div>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

In Bootstrap 3, there are certain limitations when it comes to removing padding from columns. You can utilize the p-0 class with padding: 0 !important in your CSS and apply the p-0 class to the right sections. I've made the necessary updates to your code for your reference. Hope this helps!

.p-0 {
  padding: 0 !important;
}

.row-eq-height {
  display: flex;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="container" style="color:white;">
   <div>
       <div class="row row-eq-height">
           <div class="col-lg-5 col-md-5" >
               <div class="row row-eq-height">
                   <div class="col-md-4 col-lg-4" style="background-color:darkorange;padding:15px; text-align:center;">
                       <div><i class="fa fa-book fa-5x" ></i></div>
                       <div style="color:white;font-size:large;">Grades</div>
                   </div>
                   <div class="col-md-8 col-lg-8 p-0" style="background-color:#FFB964; font-weight:bold; ">
                       
                       <div class="col-md-12 col-lg-12"  >
                           <span style="font-size:48px;color:silver;">0</span>
                           <span style="font-size:large;">New Grades</span>
                       </div>
                       <div class="col-md-12" style="border-bottom:1px solid red; "></div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span>
                       </div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Name: Animal Thumbnail</span>
                       </div>
                   </div>
               </div>
               
           </div>
           <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
                 <div class="row row-eq-height">
                   <div class="col-md-4 col-lg-4" style="background-color:deepskyblue;padding:15px; text-align:center;">
                       <div><i class="fa fa-pencil fa-5x" ></i></div>
                       <div style="color:white;font-size:large;">Grades</div>
                   </div>
                   <div class="col-md-8 col-lg-8 p-0" style="background-color:#5BD4FC; font-weight:bold; ">
                       <div class="col-md-12 col-lg-12">
                           <span style="font-size:48px;color:silver;padding:10px;">0</span>
                           <span style="font-size:large;">New Assignments</span>
                       </div>
                        <div class="col-md-12" style="border-bottom:1px solid red; "></div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span>
                       </div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Name: Animal Thumbnail</span>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <div style="padding-top:50px;">
           <div class="row row-eq-height">
           <div class="col-lg-5 col-md-5" >
               <div class="row row-eq-height">
                   <div class="col-md-4 col-lg-4" style="background-color:rebeccapurple;padding:15px; text-align:center;">
                       <div><i class="fa fa-check-square-o fa-5x" ></i></div>
                       <div style="color:white;font-size:large;">Grades</div>
                   </div>
                   <div class="col-md-8 col-lg-8 p-0" style="background-color:#8F59FF; font-weight:bold; ">
                       <div class="col-md-12 col-lg-12">
                           <span style="font-size:48px;color:silver;padding:10px;">0</span>
                           <span style="font-size:large;">New Postings</span>
                       </div>
                        <div class="col-md-12" style="border-bottom:1px solid red; "></div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Last Abs Per: 07</span> <span style="float:right;">Date: 3/26</span>
                       </div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Name: Absent-Unexcused</span>
                       </div>
                   </div>
               </div>
               
           </div>
           <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
                 <div class="row row-eq-height">
                   <div class="col-md-4 col-lg-4" style="background-color:crimson;padding:15px; text-align:center;">
                       <div><i class="fa fa-comment-o fa-5x" ></i></div>
                       <div style="color:white;font-size:large;">Messages</div>
                   </div>
                   <div class="col-md-8 col-lg-8 p-0" style="background-color:#F16A85; font-weight:bold; ">
                       <div class="col-md-12 col-lg-12">
                           <span style="font-size:48px;color:silver;padding:10px;">0</span>
                           <span style="font-size:large;">New Messages</span>
                       </div>
                        <div class="col-md-12" style="border-bottom:1px solid red; "></div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span>
                       </div>
                       <div class="col-md-12 col-lg-12" style="padding:5px;">
                           <span style="float:left;">Name: Animal Thumbnail</span>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       </div>
       
   </div>

Answer №2

To achieve a clean look, consider applying the !important rule to set your div's margin and padding to 0.

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

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

Button component in React JS fails to appear on iPhones

After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint ...

javascripthtmlcssreactjs

What is the best way to display the selected value from a bootstrap dropdown toggle based on a specific condition?

One of the features I have implemented is a bootstrap dropdown. With PHP, I retrieve the country of the visitor. If the visitor is from England or any other country not listed below, English needs to be shown at the top and removed from the list, as depict ...

javascriptphpjquerytwitter-bootstrap

Adding values with buttons to input ranges allows for easy manipulation and adjustment

Hey there! I need some help with manipulating a range slider using buttons. I added two buttons to decrease and increase the value, which you can check out in this FIDDLE. However, I am encountering an issue. When you click the "less" button multiple time ...

javascriptjqueryhtml

"The search returned no results" is not shown in the "bootstrap-table" interface

I have integrated the "bootstrap-table"(https://github.com/wenzhixin/bootstrap-table) plugin into my website and configured it to utilize server-side pagination. The table is successfully populated with data, and the search functionality is also operation ...

phpjsontwitter-bootstrapbootstrap-table

Revamp the Bootstrap 4 Form Check: Rearrange Options from left-to-right and top-to-bottom to top-to-bottom and left-to-right

I am currently using a Bootstrap form that displays a checkbox with 13 different options, including: Urban Plans Commercial Entity Cultural Approval Education Sector Hospitality Industrial Design Interiors Art Leisure/ Sporting Residential Care Retail Spa ...

htmlcssbootstrap-4

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

jquerycsshtmlcanvas

What would be the best way to horizontally center align two BTN buttons inside a jumbotron using HTML?

Looking to create a homepage using HTML and CSS, but need help with center aligning buttons within a jumbotron. Please refer to the screenshot linked below for reference: https://i.sstatic.net/3PX9I.png This is my current HTML code: <div class="j ...

htmlcss

What could be causing the issue with passing an ID through the href attribute of an anchor tag in

Greetings! I am working with a specific directory structure for my HTML files and have made adjustments to the .htaccess file to read .html files as .php when necessary. Snapshot 1: Directory structure https://i.sstatic.net/pHh67.png Snapshot 2: localho ...

javascriptphphtml

Separate the two divs with some added spacing

I am facing a challenge in creating a navbar with two regions split by white space. I attempted to use float:right and justify-content: space-between, but it doesn't seem to work as expected. My goal is to have site-header-right on the right side and ...

htmlcssflexbox

What is the best way to utilize Content-Disposition: attachment?

I am new to creating websites and I am trying to make it easier for users to download mp3's from my site by allowing them to left click instead of the traditional right click and save as method. In order to achieve this, I need to set the Content-Disp ...

phphtmlcontent-disposition

What is the optimal choice: Using Stack with direction="horizontal" or employing display flex in React Bootstrap?

In my opinion, the two functions may seem similar, but from personal experience I tend to favor using display flex over Stack in react boostrap. I find that display flex offers more flexibility when it comes to spacing out objects. Would anyone be able to ...

cssreactjsstackbootstrap-5react-bootstrap

Guide on accessing the text content within a div element in HTML by triggering a button click

To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...

javascripthtmljquery

Having trouble with SVG background image not displaying properly and positioning correctly?

I need help fitting an svg as a background into an element that is 80% of the screen width. Here is the desired final result: https://i.sstatic.net/LhybR.png The svg effect only works correctly when I reduce the width, but then it breaks in two. I want ...

htmlcss

What is the method to stimulate a browser refresh using programming?

In my setup, I have three computers with specific roles - the Server, Client, and Viewer. As the administrator, I have control over both the server and the viewer devices. When a user from the Client machine connects to the Server, they are greeted with ...

javascripthtmlajaxbrowserpage-refresh

Unable to apply border-radius to a specific HTML table

I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for: ht ...

htmlcss

Unable to expand the Navbar toggler feature in Bootstrap 5

Despite searching for solutions to this issue in previous discussions, I have been unable to successfully implement them. Recently, I was experimenting with Bootstrap 5, specifically the collapsible navbar button feature. The idea is that when the viewpor ...

javascripthtmlcssbootstrap-5

Mobile-friendly persistent navigation located beneath the header, inspired by the iOS7 browser design

This issue is really causing me a headache and slowing down progress on my project because I can't seem to figure it out. Currently, I am working on designing a mobile-friendly website and conducting tests in iOS7/OSX. The layout I am aiming for inc ...

javascripthtmlcssweb-applicationsmobile

Include a new variable in a JavaScript email template

Is there a way to include the variable bob in the body of an email? var bob; function sendMail() { var link = "mailto:YourEmailHere" + "?cc=" + "&subject=App Build Link Buit With MWFPRO's App Build Tool" + "&body=Hi ...

javascripthtmlemailhyperlink

E-store product divisions in sync

I am currently working on an e-shop project using TYPO3 CMS. One of the issues I am facing is with the formatting of the product list (when clicking on all products). The beginnings of categories appear with varying spacing. Take a look at this picture for ...

htmlcsstypo3