Search code examples
twitter-bootstrapbootstrap-4sasstwitter-bootstrap-3bootstrap-grid

Div using instead of table in bootstrap

am using div to create of a table but i can create but with title i wants to give my customized padding and margin for the title.And that stylle should be applicable to the inner content of the div.kindly find the below picture and code.I need it exactly like that but i dont know how to do that.

enter image description here 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .wrapper-border{
  border: 1px solid #e4e7eb;
  }
  </style>
</head>
<body>

<div class="container">
 
  <div class="row">
    <div class="col-sm-6 wrapper-border">
     <div class="row"  style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
    margin-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;">
        <h5>TITLE</h5>
        </div>
        <div class="row" style="border-bottom:1px solid #e4e7eb; margin-bottom:20px">
        <div class="col-sm-12">
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
        </div>
       <div class="col-sm-6">
        <div class="row col-md-8  col-sm-12">
          Januvary - Friday 
        Monday - saturdauy
        </div>
        
      
       </div>
        <div class="col-sm-6">
         The purpose of lorem ipsum is to create a natural looking block
       </div>
     </div>
        <div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
    margin-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;">
        <div class="col-sm-12">
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
        </div>
       <div class="col-sm-6">
        <div class="row col-md-8  col-sm-12">
          Januvary - Friday 
        Monday - saturdauy
        </div>
        
      
       </div>
        <div class="col-sm-6">
         The purpose of lorem ipsum is to create a natural looking block
       </div>
     </div>
    </div>
    <div class="col-sm-6">
    
</div>
  </div>
</div>
    
</body>
</html>

Actual problem here as per the layout i can't able to modify the style including border-bottom.kindly help me to do that as per the layout i need to align it.

Solution

  • .item + .item The ( + ) sign means the element after the element to which the style is applied

    .section {
  border: 1px solid #000;
}
.section .section-header {
  border-bottom: 1px solid #000;
  padding: 24px;
}
.section .section-body {
  padding: 0 24px;
}
.section .section-body .item {
  padding: 24px;
}
.section .section-body .item + .item {
  border-top: 1px solid #000;
}
.other-items {
  display: flex;
  justify-content: space-around;
}
    <div class="section">
  
  <div class="section-header">
    title header
  </div>
  
  <div class="section-body">
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
    
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
    
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
  </div>
  
</div>