5

I am working with bootstrap 4.0.0 and I have the following code:

<div class="notice">
 <div class="container">
  <div class="row justify-content-center">
     <div class="col-lg-8">
        <h2>Notice Board</h2>
        <div class="col-lg-6">
           <div class="notice_date">
              23 June <br>2018
           </div>
        </div><!-- end of first col-lg-6 -->
        <div class="col-lg-6">
           <div class="notice_contents">
              <h4><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
           </div>
        </div><!-- end of second col-lg-6 -->
     </div><!-- end of col-lg-8 -->
  </div>

I am expecting a 8 grid row at the center of the page and contents divided in half. But in this case, contents are not side by side and getting below another one, why is this happening? I have added popper.min.js and tested that is working correctly.

Sudip Biswas
  • 77
  • 2
  • 6

2 Answers2

5

It looks like you needed to add a new row after the col-lg-8. The way the bootstrap grid system works is for every row, you may only have up to 12 columns.

https://getbootstrap.com/docs/4.0/layout/grid/

Ray Solomon
  • 66
  • 1
  • 3
1

It seems you need to wrap the two div's(with class="col-lg-6") in a parent div with a row class.

Here's a live preview: https://jsfiddle.net/kcLzq4bg/

<div class="notice">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-lg-8">
            <h2>Notice Board</h2>
            <div class="row">
               <div class="col-lg-6">
                  <div class="notice_date">
                     23 June <br>2018
                  </div>
               </div>
               <!-- end of first col-lg-6 -->
               <div class="col-lg-6">
                  <div class="notice_contents">
                     <h4><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
                  </div>
               </div>
               <!-- end of second col-lg-6 -->
            </div>
         </div>
         <!-- end of col-lg-8 -->
      </div>
   </div>
</div>
RPasad
  • 11
  • 1