Question 169585 in Html Question posted in
Some basic documentation can be found here.

Why are 6-unit cols stacking in 12-unit layout? HTML?

I tried creating a container and then divided it into two sections with the working hours taking up 6 columns and the other 6 for the map itself but I want them both centred on the page. I thought maybe because I ran out of columns that’s why the map is placed below instead rather than beside. so I reduced the column count using 4 columns for the working hour and 6 for the map (2 columns left) and then further divided the columns for the times in accordance with the parent div containing 4 columns (thus the hours and days of the week were to occupy 2 columns each making up the 4 but it doesn’t seem to be working right.

Here is a snippet of the portion of my code I’m having trouble with:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="maps-link">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <!--justify-content-center-->
      <div class="col-md-6">
        <h5 class="text-uppercase"> Working hours</h5>
        <div class="row">
          <div class="col-md-3">
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
            <p>Saturday</p>
            <p>Sunday</p>
          </div>
          
          <div class="col-md-3">
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
          </div>
        </div>
        
        <div class="col-md-6">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%207C9%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
Tags:

2

Answers


  1. 0

    Make sure to include the necessary Bootstrap CSS and JS files in your webpage for the layout classes to work correctly.

       <div class="container">
      <div class="row align-items-center justify-content-center">
        <div class="col-md-4">
          <h5 class="text-uppercase">Working hours</h5>
          <div class="row">
            <div class="col-md-6">
              <p>Monday</p>
              <p>Tuesday</p>
              <p>Wednesday</p>
              <p>Thursday</p>
              <p>Friday</p>
              <p>Saturday</p>
              <p>Sunday</p>
            </div>
            <div class="col-md-6">
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
              <p>9:00 - 18:00</p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%207C9%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="embed-responsive-item"></iframe>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. 0

    You have a column nested directly inside a column. This is incorrect. By simply closing the first column element before starting the second one we resolve that.

    A good editor and proper code formatting make spotting this sort of problem easier. I like leaving whitespace between sibling block-level elements for better visualization.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="maps-link">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <div class="col-md-6">
        <h5 class="text-uppercase"> Working hours</h5>

        <div class="row">
          <div class="col-md-3">
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
            <p>Saturday</p>
            <p>Sunday</p>
          </div>

          <div class="col-md-3">
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
            <P>9:00 - 18:00</P>
          </div>
        </div>
      </div> <!-- NEW TAG -->

      <div class="col-md-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%207C9%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk"
          width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search