Use Bootstrap 4 grid To create two cols inside col-6

Question

I've been trying my hand at frontend and have been using Bootstrap 4 to create a template.

According to this I should get away with this HTML to create a layout whereby two divs take up 50% of the container and one div takes up the other 50%.

The HTML I used was:

<div class="row">
  <div class="col">
    <div class="col">
      <h3>Opening Hours</h3>
      <ul>
        <li>Mon: 9:00am - 5:30pm</li>
        <li>Tues: 9:00am - 5:30pm</li>
        <li>Wed: 9:00am - 5:30pm</li>
        <li>Thurs: 9:00am - 5:30pm</li>
        <li>Fri: 9:00am - 5:00pm</li>
        <li>Sat: 9:00am - 5:00pm</li>
        <li>Sun: -CLOSED-</li>
      </ul>
    </div>

    <div class="col">
      <h3>Available Services</h3>
      <ul>
        <li>Motorcycle Sales</li>
        <li>Scooter Sales</li>
        <li>Servicing</li>
      </ul>
    </div>
  </div>

  <div class="col">
    <p>Google MAPS SHIT</p>
  </div>
</div>

But this renders the two div underneath each other as opposed to being inline.

A jsfiddle to clearly see the results.

How does one use the grid system to create a layout of:

[25% 25%] [50%]

Looks like you need to add another `row` to wrap the smaller divs — Paulie_D, Mar 26 '19 at 15:53
@Paulie_D o.O kek. Seems to go against all logic.. must be in frontend! xD (note: it works with added row) — treyBake, Mar 26 '19 at 15:54

Use Bootstrap 4 grid To create two cols inside col-6

0 Answers0