My teacher has been assigning my class these trainings from a class on Lynda.com (Bootstrap 4 Essentials Trainings).
I have no idea what's wrong with my code. I copied it directly from the trainings and I'm not sure what happened.
The carousel will only load images with the active class
The accordion won't show content unless I apply the show class
The alert doesn't go away when I click the 'x'
In one document, I copied the code and made alterations to fit the requirements for the assignment I've been given. In the other, I copy-pasted the elements directly from the completed files that are working as they should when I run them. Neither of these documents is functioning properly (these files are for an assignment that is separate from the Lynda training files):
<html lang="en">
<head>
<title>Worksheet 8</title>
<!--
Author: Crab
Date: 11/20/2020
Filename: worksheet8.html
-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
</header>
<header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
<h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
</header>
<div class="container">
<h2>Carousel</h2>
<div class="row">
<section class="col-12">
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#feature" data-slide-to="0"></li>
<li data-target="#feature" data-slide-to="1"></li>
<li data-target="#feature" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
</div>
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
<div class="carousel-caption d-none d-md-block">
<h3>Pete, owner of McAllister</h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item active">
<div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
<h2>Our Mission</h2>
<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
<h2 class="pt-4">Accordion</h2>
<div class="accordion" id="servicesaccordion">
<div class="card">
<div class="card-header" id="groomingheading">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
Grooming
</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
<div class="card-body">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading">
<h5 class="mb-0">
<a href="#generalhealth"
class="collapsed"
data-toggle="collapse"
aria-expanded="false"
aria-controls="generalhealth"
>General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
<div class="card-body">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="nutritionheading">
<h5 class="mb-0">
<a href="#nutrition" class="collapsed" data-toggle="collapse"
aria-expanded="false">
Nutrition
</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
<div class="card-body">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div><!-- accordion -->
<h2 class="pt-4">Alert</h2>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
More Info
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
Replace the last 3 with these
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
And it should work fine now, it was most likely a problem with your script tags
Related
I want to stretch images in a carousel the entire width and height of the div that contains the carousel. However, the images are currently not occupying 100% width of the div, and the height is smaller or larger than the div. I am using Bootstrap 4.3.1. My code excerpt is shown below. Entire code is in this JS Fiddle page.
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card" style="height: 350px;">
<div id="photoCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="d-block img-fluid">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
Your card <div>s still have their default padding,
Change all the <div class="col-sm-4 card" ...> to <div class="col-sm-4 card p-0" ....>.
or change the appropriate classes to include padding: 0;
With some CSS the object-fit and object-position of the images, and adding some other bootstrap utility classes, I am able to make your images take up 100% height and width of your carousel container. Is this what you are looking for?
.carousel-item img {
object-fit: cover;
object-position: center center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Page title</h1>
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card p-0" style="height: 350px;">
<div id="photoCarousel" class="carousel h-100 slide" data-ride="carousel">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<div class="carousel-item h-100">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="position-absolute t-0 l-0 w-100 h-100">
</div>
<div class="carousel-item h-100">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm coding a website in Arabic language content.
Problem: The content of the accordion-button should be reversed (the question in the right,the down arrow in the left).
How can I solve it?
<!-- Bootstrap 5.0.x library -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="accordion accordion-flush" id="questions">
<!--Begining of the item-->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#quest_1">
السؤال الأول
</button>
</h2>
<div id="quest_1" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body text-end">
الإجابة على السؤال الأول
</div>
</div>
</div>
<!--Ending of the item-->
</div>
simply add dir="rtl" (direction: Right-To-Left) to the button. If you want to change the whole website to an "arabic layout" you could also add it to the <html> tag directly: <html lang="ar" dir="rtl">
<!-- Bootstrap 5.0.x library -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="accordion accordion-flush" id="questions">
<!--Begining of the item-->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button dir="rtl" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#quest_1">
السؤال الأول
</button>
</h2>
<div id="quest_1" class="accordion-collapse collapse" data-bs-parent="#questions">
<div class="accordion-body text-end">
الإجابة على السؤال الأول
</div>
</div>
</div>
<!--Ending of the item-->
</div>
I am completing a course from coursera on bootstrap and was following along with the course, but the toggle button on the navigation bar of one of the webpages isn't working and displays error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)"
I have the same code in the index.html (home page) and the button seems to be working perfectly in that, but in the aboutus.html it won't open the collapsed navigation options
Here are the codes:
aboutus.html --> the one with the error
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion: About Us</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-header">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">About Us</li>
</ol>
<div class="col-sm-6">
<h3>About Us</h3>
<hr>
</div>
</div>
<div class="row row-content">
<div class="col col-sm-6 order-sm-last col-md-6">
<h2>Our History</h2>
<p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
<p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
</div>
<div>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-12">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm-6 order-sm-last col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm-6 col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm-6 order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I believe you're missing the script tags at the end of your aboutus page. Try adding these lines just before you close your body tag.
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
I created a Bootstrap 4 accordion. I have two divs in the button header. One float left the other float right. The one on the right is a picture and the one on the left is a title and a subtitle.
All works great except I want the div on the left to be the same height as the div on the right and to also have the 2 titles be vertically aligned.
When I mess around with css to try and accomplish the above, I keep breaking something else in the accordion. I am at the end of my rope. I have created a fiddle and hope that somebody is able to help.
I created a fiddle here: >> Fiddle <<
<div class="accordion" id="page-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="left">
<h5 class="card-title">OCTOBER 2018</h5>
<h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
</div>
<div class="right">
<img src="pic.png" width="209px" height="119">
</div>
<div class="clear"></div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
<div class="card-body">
<p class="card-text">DETAILS COMING SOON</p>
Click here for details
</div>
</div>
</div>
</div>
Fixed JSFiddle Here
You can use display: flex to make each item in a container have the same height. I also had to make one small change to your container h5. Display flex is a great alternative to using float (which can be very tricky to work with).
<!doctype html>
<html lang="en">
<head>
<!-- before all other stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<!-- ACCORDION -->
<div class="accordion" id="page-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5 class="card-title">OCTOBER 2018</h5>
<h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
</button>
</h5>
<div>
<img src="pic.png" width="209px" height="119">
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
<div class="card-body">
<p class="card-text">DETAILS COMING SOON</p>
Click here for details
</div>
</div>
</div>
</div>
</body>
</html>
So, I was trying to make my modal only work on screens smaller than tablets. That worked successfully.
But now, I made some changes and I need to home to work on desktop size as well.
I tried removing the d-none to d-block but it didn't work
Any ideas?
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="assets/about/about1.jpg" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline d-xl-none"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="assets/about/about1.jpg" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>
Well, that's just because I had designed that code snippet to work that way. That behavior was what the original asker wanted.
So, to get the link show up on large screens (everywhere basically), you just comment out or remove the second figcaption and also remove the d-xl-none class from the first one.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="https://placeimg.com/640/480/animals" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<!--
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
-->
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="https://placeimg.com/540/380/animals" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>