What I'm trying to do is make on my own a webpage with bootstrap.
I want to, instead of a navbar-toggler, put a dropdown. I am not fully familiar with JS yet. For this reason, I wanted to do it with only bootstrap.
I put a #media to change the #TheNav display to none at certain screen width. At the same time the opposite with the dropdown. The problem is that the dropdown doesn't work, I've been trying different things but nothing. So what I've done is to copy a predetermined bootstrap dropdown and put it below everything, and still doesn't work!! I revised having all bootstrap links in order and position,...
THIS IS THE HTML DOCUMENT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/Tabler/logo.png">
<!-- bootstrap head link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="tabler.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<title >tabler</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="text-decoration-none navbar-brand ms-5 ps-5 mt-0 pt-0">
<div class="d-flex justify-content-center">
<img src="/Tabler/logo.png" style="width: 25px; height: 25px;">
<span class="mx-2 text-dark fw-bold" style="font-family: 'Nunito', sans-serif;">
tabler
</span>
</div>
</a>
<div class="me-5 pe-5" id="TheNav">
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Demo</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Source Email</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Tabler Email</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="Jumbo">
<div class="col-lg-6 text-center">
<h1 class="text-white mt-5">Admin panel made simple. For Free!</h1>
<p class="subHed text-white my-4">Premium and Open Source dashboard template with responsive and high quality UI.</p>
<div class="mb-5">
<button class="text-white downloadBut btn me-1">
Download
</button>
<button class="text-dark bg-white text-bold btn ms-1" id="demoBtn">
Browse Demo
</button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- bootstrap body links -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
AND THIS IS THE CSS
.downloadBut {
background-color: rgb(38, 187, 71);
}
#Jumbo {
background-color: rgb(27, 150, 231);
}
.btn {
border: none;
padding: 8px 16px;
font-size: 11px;
font-weight: bold;
border-radius: 2%;
}
.subHed {
font-size: 16px;
font-weight: 450;
opacity: .8;
}
h1 {
font-size: 22px;
}
#demoBtn {
color: rgb(180, 177, 177);
}
.nav-link {
color: rgb(83, 82, 82);
}
#media screen and (max-width: 580px) {
#TheNav {
display: none;
}
}
#media screen and (min-width: 581px) {
#TheNav {
display: flex;
}
}
#media screen and (min-width: 581px) {
.dropD {
display: none;
}
}
Related
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
whenever I am trying to give a class to an h1 or h3 or any img and try to edit in my style.css file it doesn't make any changes but when I try inline CSS it works fine. am using bootstrap 4.
here I have added CSS inline that's why it's working but when I try to add CSS in style.css by targetting a class it doesn't show effect.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- css file link -->
<link rel="stylesheet" href="/css/styles.css">
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- bootstrap js -->
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
Add Your Custom CSS After Bootstrap
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- css file link --> <!-- **Add Here Your Custom CSS** -->
<link rel="stylesheet" href="/css/styles.css">
<!-- bootstrap js -->
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
This is not working because you have place bootstrap file after your file.That's why your file ignored.
Place bootstrap file on the top,and your css file below boostrap's file.
Maintain following order:
BootstrapFile
fontawesome file
Your css file
Just before closing body tag:
Bootstrap js file
Any third party js file
Your js file
By doing this, you are telling that do more preference to my files.
I want to change the height and background color of the <hr> tag in HTML. Although the height and color change, but it seems the background color opacity is reducing slightly. Why is this happening?
My Code:
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
How can I get the original color and why is this problem happening? I am using the current version of Chrome (Windows 10).
Edited
I get such output in the browser when I run the whole code:
My whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: url(./images/bg-masthead.jpg) no-repeat center center/cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
In your reboot.scss you have an hr style with opacity:.25;.
Add:
hr {
opacity:1;
}
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#ff0000;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
/*background: url(./images/bg-masthead.jpg) no-repeat center center/cover;*/
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
hr {
opacity:1;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
You have a reboot.css in bootstrap file that has opacity: .25, so you have to reset your hr by adding opacity: 1 to it
I want the image to fill in the column of the page:- https://i.stack.imgur.com/VtgcW.jpg
I am trying to recreate a website to test my skills the website is:-https://www.simplesite.com
It is working when I assign it to the body but when I assign it to the div then there is white space below. I have tried a lot of things still can't get rid of this white space. Any help would be appreciated
HTML:-
<!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">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
CSS:-
#mainNavbar .navbar-brand {
font-size: 2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("imgs/starter5.jpg") center center;
background-repeat: no-repeat;
background-size: ;
}
Please check this jsfiddle link. Hope this solves your problem. Below is the same code.
#mainNavbar .navbar-brand {
font-size:2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("https://previews.123rf.com/images/dolgachov/dolgachov1407/dolgachov140701912/29971506-business-interview-employment-and-office-concept-business-team-with-tablet-pc-computer-interviewing-.jpg") center center / cover;
background-repeat: no-repeat;
background-size: ;
min-height: 100vh;
}
<!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">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
</body>
</html>
https://jsfiddle.net/yudizsolutions/nartkmud/4/
First of all You need the background size to fit the fold, which means set it to cover (please note that the image size should be 1920x1080 to look good and not pixelated).
add/change this:
.contain {
background: url("imgs/starter5.jpg") 50% 0;
background-repeat: no-repeat;
background-size: cover;
}
If the image is good than it should fill all the 1st fold of the page!
Your css need little modification. Please try the below height property in your contain class :
.contain {
background: url(imgs/starter5.jpg) center center;
background-repeat: no-repeat;
height: 100vh;
}
I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>