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>
2
Answers
Make sure to include the necessary Bootstrap CSS and JS files in your webpage for the layout classes to work correctly.
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.