logo
Tags down

shadow

add horizontal line between two div


By : krishna
Date : May 07 2020, 09:00 AM

I created a colorful box using bootstrap. I try to add a horizontal line which goes from left to right as shown in second picture. I try to add new div having border in button but it did not fit in whole width of box.

enter image description here

Fig: Image with border not fit in right container

enter image description here

Fig: Expected fit border in container

Here is my code like .

.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">
        <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" 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" 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>
        </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" 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" 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>
        </div>
      </div>
    </div>
  </div>

</div>

https://codepen.io/anon/pen/ZPNepV

My border is not fit in right container.

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

There few limitation in Bootstrap 3 for removing columns padding You need to write p-0 class with padding: 0 !important CSS and add p-0 class in all right section. I just updated your code, i hope it'll help you to fix this :

.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>
       <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>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org