I am creating one landing page in Bootstrap 5, where default menu should be replaced by off-canvas menu with a close icon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
</body>
</html>
I searched some tutorial but was not able to implement close button. I need menu icon to be opened from right as a off-canvas menu with working dropdowns, Any help will be appreciated.
Thanks.
Bootstrap 5 Beta 3 (update 2021)
Introducing the new Bootstrap 5 Offcanvas Component
Bootstrap 5 Beta 2 (original answer)
Off-canvas menus are not an official Bootstrap component, but you can create one by using this "experimental" template as an example. You'll see that it requires additional CSS and JS.
Related
I am new to web development, I am trying to make responsive/ mobile menu with a close icon, How to show/ add close icon for bootstrap 5 mobile menu? I explored and tried a lot but unfortunately, was not able to achieve that.
Any help will be appreciated.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
</body>
</html>
I am using Bootstrap 5 cdn
default classes of bootstrap 5
Try that, Note using jQuery library for javascript part and also adding bootstrap icons library, study the changes I made so that you could use the same icon methods around the script to improve:
$( document ).ready(function() {
$('.navbar-toggler').click(function(){
if($('.navbar-toggler').hasClass('collapsed')){
$('.navbar-toggler .bi').removeClass('bi-x');
$('.navbar-toggler .bi').addClass('bi-list');
}else{
$('.navbar-toggler .bi').removeClass('bi-list');
$('.navbar-toggler .bi').addClass('bi-x');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="bi bi-list"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I'm a complete novice when it comes to front end coding. I've made a simple design using Bootstrap 4 but some elements look completely different in IE than Chrome / Opera:
Chrome:
IE:
I've tried doing some research but I can't figure out what could be causing it. Here is the code for the search box and the card footer:
<ul class="nav navbar-nav flex-fill w-100 justify-content-end">
<li class="nav-item">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-primary" name="searchAll" onclick=" search_all()">Search</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" onclick="search_newest()">Newest</a>
<a class="dropdown-item" href="#" onclick="search_lowest()">Lowest Price</a>
<a class="dropdown-item" href="#" onclick="search_incOOS()">Include Out of Stock</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#" onclick="search_premium()">Premium Sellers Only</a>
</div>
</div>
<input type="text" class="form-control border-primary" id="searchbox" aria-label="Search for a product ...">
</div>
</li>
</ul>
and the code for the Card footer:
<div class="card-footer text-muted">
<div class="row">
<div class="col-sm-6">
<h5 class="Product-Info" style="float:left; margin-top: 4px;">0.00</h5>
</div>
<div class="col-sm-6">
<h5 class="Product-Info-Stock" style="float:right;">
<div class="box">
<span><svg aria-hidden="true" style="width:20px;" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-circle fa-w-16 text-success mr-1"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path></svg>
</span>
<span class="text-muted" style="margin-top: 5px;">0</span>
</div>
</h5>
</div>
</div>
</div>
</div>
</div>
Does anyone have any tips on how I can make the layout work properly with IE11 too?
Thanks!
Sorry to be a pain. I might have been staring at my code for way to long but I am trying to implement a Bootstrap Carousel into my website that will show 3 and then progress one. I am currently following the code sniper at: https://www.codeply.com/go/EIOtI7nkP8 but can only get it to show one and progress one at a time.
Any help would be most appreciated.
Many thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="THE CARE COMPANY (SW) LTD, home care, care, care company, the, company, jobs, care jobs, TORBAY, DEVON, kingsbridge, totnes, plymouth, Care in Torbay , care Torbay, Care torquay, Torbay care , Care for eldery torbay, Torquay, the care company, home care services, home care medical, come care near me, home care elderly, home care agency, caregiver, home health care, respite care, home health aide, homecare, home care services, health, healthcare, assisted living, caregiver, respite care">
<meta name="description" content="Delivering professional home care & live-in care services. The Care Company provides bespoke respite care, dementia care, Alzheimer's care & much more." class="">
<title>The Care Company (SW) LTD</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" style="font-size: 1rem !IMPORTANT">The Care Company (SW) LTD</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Our Expertise
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How Does Our Care Work</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our CAREGivers</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Partnerships and professionals</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our Care Options</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Home Care Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Companionship</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Home Help and Housekeeping</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Personal Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Dementia Care Including Alzheimer's desease</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Advice and Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Cost Of Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">FAQ'S</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How To Age Well</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Understanding And Preparing For Home Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Nutrition</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Preventing Hospitalisation</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Alzheimers and Dementia Care</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Executive Profile</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Awards</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">What People Say About Us</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Why Choose The Care Company (SW) LTD</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Join Our Team
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">#YouCanCare</a>
</div>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead v-header">
<div class="fullscreen-video-wrap">
<video src="video/vid.mp4" autoplay="yes" loop="yes">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center container">
<h1 class="mx-auto my-0 text-uppercase" style="margin-bottom: 2px !IMPORTANT">Welcome To The Care Company (SW) LTD</h1>
<p style="color: white !IMPORTANT">Supporting Independence At Home</p>
<p>Our home care services not only provide you with the care you want, where and when you want it, we strive to keep you in control. It is your decisions, your life, your way.</p>
<h2 class="text-white-50 mx-auto mt-2 mb-5" style="color: white !IMPORTANT"></h2>
<p>Call on: 01548 521789</p>
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Supported at home the<img class="img-fluid mb-3 mb-lg-0" src="img/words/you.jpg" width="30%" alt="way you want"></h1>
<p class="text-black" >We understand that home is where you feel the happiest. If you want to stay living comfortably at home, you can live well, your way with The Care Company (SW) LTD.
<br><br>
Home Instead has been at the forefront of specialised home care for the elderly and supporting those being cared for and their families for many years. Founded on personal experience, these family values remain at the core of everything we do 24 years on.
<br><br>
Our award-winning care at home fits around your life - it’s tailored, it’s flexible and it’s adaptable. Whether you’re looking for help getting dressed and showered, help around the house or companionship, Home Instead’s trained CAREGivers are perfectly matched to you.
<br><br>
We believe age should be celebrated and that everybody should be able to live happily, comfortably and independently at home.
<br><br>
Start your Home Instead journey today.
<br><br><br>
Read More
</div>
</div>
<div class="row">
<div class="column">
<h1 class="text-black">Caring</h1>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”</p>
</div>
<div class="column">
<h1 class="text-black">Trustworthy</h1>
<br>
<p class="text-black">– We deliver a high standard of care, with integrity, through people who are passionate about what they do.
<br><br>
– “We are reliable, safe and diligent"</p>
</div>
<div class="column">
<h1 class="text-black">Positive</h1>
<br>
<p class="text-black">– We endeavour to encourage optimism and positive outcomes because we are enthusiastic about what we do.
<br><br>
– “We are pragmatic, tenacious, willing and conscientious”</p>
</div>
</div>
</div>
</section>
<!-- Looking For Staff Section -->
<section id="wjs" class="wjs-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="text-black" style="font-size: 20px">
“ There is a real feeling of assurance that the person you love and care for is being taken care of in your absence. That’s what Home Instead does. My aunt hates to see her CAREGivers go. There are times she probably would like to see them more than me. ’’
<br><br>
Bon Jove - Clients Family
<br><br>
Read more client testimonials:
<br><br>
Testimonials
</div>
</div>
</div>
</section>
<!-- Why Join Us Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="text-black mb-4">Services</h1>
<div class="row">
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/rcare.png" width="65%" alt="Respite Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/hcare.png" width="65%" alt="Hourly Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/ccare..png" width="65%" alt="Complex Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
</div>
<h3 class="text-black mb-4">To view all our services please click below:</h3>
All Services<br><br><br><br>
</div>
</section>
<!-- contact us Section -->
<section id="contactUs" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<br><br>
<h2 class="text-black mb-5">Contact Us:</h2>
<p>You can either contact us via the form below or by post to: <br>The Care Company (SW) LTD, Little Spires, Totnes, Devon, TQ9 7QE <br> Tel: 01548 521789</p>
<form class="form-inline d-flex" action="contact_post.php"method="post">
<input type="test" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactFN" placeholder="Enter First Name *">
<input type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactLN" placeholder="Enter Last Name *">
<input style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactCN" placeholder="Enter Subject">
<input type="email" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactE" placeholder="Enter Contact Email Address *">
<input type="number" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactN" placeholder="Enter Contact Number *">
<textarea style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" cols="40" rows="5" id="contactM" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactM" placeholder="Let us know how we can help"></textarea>
<br>
<p>By clicking submit I consent to The Care Company (SW) LTD using my data for marketing purposes. I have read and accept the Privacy Policy</p>
<button type="submit" style="margin-top: 20px !IMPORTANT" class="btn btn-primary mx-auto">Submit</button>
</form>
<br>
<br><br>
</div>
</div>
</div>
</section>
<!-- quick page Section -->
<!-- quick page Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Awards & Affiliates</h1>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
</a>
</div>
<br><br>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<section id="contactUs" class="signup-section">
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">News & Events</h5>
<div class="container">
<?php
$stmt = $db->query('SELECT postTitle, postSlug FROM blog_posts ORDER BY postID DESC LIMIT 5');
while($row = $stmt->fetch()){
echo '<p>'.$row['postTitle'].'</p>';
}
?>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Useful Links</h5>
<ul class="list-unstyled">
<li>
Home
</li>
<li>
News & Events
</li>
<li>
Franchise Opportunities
</li>
<li>
About Us
</li>
<li>
Admin Log-in
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Get Started</h5>
<ul class="list-unstyled">
<li>
Home Care Services
</li>
<li>
Book a Consultation
</li>
<li>
Meet the team
</li>
<li>
Jour our team
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<p>The Care Company (SW) LTD
<br>
Little Spires
<br>
Totnes
<br>
Devon
<br>
TQ9 7QE</p>
</li>
<li>
<p>Tel: 01548 521789</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</li>
<hr style="margin-bottom: -30px !IMPORTANT">
</ul>
<!-- Call to action -->
</footer>
<!-- Footer -->
<footer class="bg-white small text-center text-black-50" style="background-color: #862d60 !IMPORTANT; color: white !IMPORTANT">
<div class="container">
<div class="col-md-12 col-xs-12" style=" margin-bottom: 20px !IMPORTANT">
<center>
Site Map | Privacy & Cookies | Terms & Conditions
</center>
</div>
<div class="social d-flex justify-content-center" style=" margin-bottom: 20px !IMPORTANT">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
</div>
Copyright © Your Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</section>
</body>
</html>
Your script for the Carousel is using jQuery, but it's trying to run before jQuery is loaded by the page. In its current state you need to move the Carousel script to AFTER the jQuery loading.
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="grayscale.min.js"></script>
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
Now the jQuery functions correctly and it moving like you desire.
I downloaded the JS and CSS for grayscale and linked to the CDNs of the libraries to confirm this would work for you.
I am working with Bootstrap 4 for the first time in a .NET MVC (Not Core) starter application. Bootstrap version updated to 4.1 within Nuget.
I need to have both a horizontal navbar at the top as well as a vertical navbar (sidebar) on the left side.
The example I have been working off of:
https://getbootstrap.com/docs/4.1/examples/dashboard/
The problem that I am having is that the sidebar only extends down as far as the main page content goes, I have been unable to get it to extend down to 100% of the page. I have tried setting the height manually both on the navbar and sidebar related divs, but it has no effect.
_Layout.cshtml :
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
</div>
</div>
</body>
Index.cshtml:
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
How it looks (yellow line represents approx where I would expect the sidebar to extend down to):
that's a bit tricky one...
Bootstrap is using extra CSS to accomplish this Layout. It wouldn't work with Bootstrap only. They added a class ".sidebar":
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
Here's a Code-Pen Example:
https://codepen.io/anon/pen/oRjmBN
I also added a 'overflow-y: auto' in case the content inside the sidebar gets to long.
Hope that helps!
I'm working on an Angular 6 app and at this moment I'm trying to center an image on home screen but no matter which solution I try (from the ones I've found here) it always shows immediately next to top navbar and not vertically centered.
I tried all solutions found in this next post in app.component.html with no luck, always get the more or less the same result as can be seen in the picture:
Vertical Align Center in Bootstrap 4
Please, help me in centering vertically home image (or text or whatever I choose to put) without affecting the rest of pages that use the app.component.html template.
index.html:
<!doctype html>
<html lang="en">
<head>
<title>WFRH</title>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app>Loading...</app>
</body>
</html>
app.component.html:
<app-nav></app-nav>
<div class="jumbotron">
<div class="container d-flex h-100" style="border: 1px solid red">
<div class="row justify-content-center align-self-center text-center">
<div class="col-sm-12">
<!-- <router-outlet></router-outlet> -->
I'm centered...
</div>
</div>
</div>
</div>
<app-footer></app-footer>
home.component.html:
<img src="../../../assets/cirsa_home.png" class="img-fluid" />
nav.component.html:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark pb-0">
<div class="container pb-1">
<!-- Brand -->
<a class="navbar-brand" href="{{xxxApp.xxxWebsiteUrl}}" target="_blank">
<img src="../../../assets/app_logo.png" />
</a>
<!-- Menu Toggler -->
<button style="margin-left: 10px;" class="navbar-toggler order-last order-sm-0" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse order-last order-sm-0" id="collapsibleNavbar" *ngIf="(isLoggedIn | async)">
<ul class="navbar-nav pull-left">
<li class="nav-item text-left hover-inverse">
<a class="nav-link text-light" href="#">
<i class="fa fa-home"></i>
<label [translate]="'wfrh_nav_home' | translate">Inicio</label>
</a>
</li>
<li class="nav-item text-left dropdown hover-inverse">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbardrop" data-toggle="dropdown">
<i class="fa fa-edit"></i>
<label [translate]="'wfrh_nav_requests' | translate">Solicitudes</label>
</a>
<div class="dropdown-menu bg-dark border-0 hover-inverse">
<a [routerLink]="['/vacancy-form']" class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_fillvacancy' | translate">APC Cubrir vacante</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_leave' | translate">APC Excedencia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_lactation' | translate">APC Lactancia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_maternity' | translate">APC Maternidad</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreationdailycasinos' | translate">APC Nueva Creación Diarios Casinos</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreation' | translate">APC Nueva Creación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_substitution' | translate">APC Sustitución IT</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_holidays' | translate">APC Vacaciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_changeofconditions' | translate">CDC Cambio Condiciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_evaluationsheet' | translate">HEV Hoja Evaluación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_balanceandsettlement' | translate">PSF Saldo y Finiquito</label>
</a>
</div>
</li>
<li class="nav-item text-left hover-inverse">
<a [routerLink]="['/login']" class="nav-link text-light">
<i class="fa fa-sign-out"></i>
<label [translate]="'wfrh_nav_logoff' | translate">Cerrar sesión</label>
</a>
</li>
</ul>
</div>
<!-- Email send tester -->
<!-- <button class="btn-primary" (click)="emailMe()">Send Test Email To Me</button> -->
<!-- User menu -->
<!-- <div class="dropdown d-flex flex-grow-1" style="margin-right: 10px;" *ngIf="(isLoggedIn | async)">
<button type="button" class="btn btn-success dropdown-toggle ml-auto" data-toggle="dropdown" id="userDropdown">
{{userName | async}}
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a [routerLink]="['/login']" class="dropdown-item">Logout</a>
</div>
</div> -->
<!-- Language Selector -->
<select class="selectpicker ml-auto" data-width="65px" id="langSelect" data-style="btn-primary" #langSelect
(change)="languageChange(langSelect.value)">
<option class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}" style="margin-bottom: 5px; width: 65px;"
*ngFor="let lang of xxxApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === xxxApp.translate.currentLang">
<span class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}"></span>
</option>
</select>
</div>
</nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark pt-0 pb-0">
<div class="container pt-0 pb-1">
<small class="username">
{{userName | async}}
</small>
</div>
</nav>
styles.css:
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body {
height: 100%;
}
You probably missunderstood the solution given in the vertical align post.
To be able to align vertically an item depending on its parent, you have to set the parent's height (that is why you see body height:100% in their example) but if, like in your html, you have many different parents, not only the parent has to have the 100% height prop, but also the children props
CSS Example :
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body, div {
height: 100%;
}
HTML Example :
<body>
<div>
<image>the centered element</image>
</div>
</body>
After researching and doing a lot of trial and error I came up with a solution that works. I hope it is useful for anyone else with this issue.
My app main template consists on an horizontal navbar header => content => horizontal navbar footer and I set a fixed height footer of 40 px so then I use a negative margin of 40px for home image so it is centered respect content div and not the whole screen (I don't like this approach very much -I mean, using negative margins- but it works):
app.component.html (the main structure):
<div class="main">
<div class="row header m-0 p-0">
<div class="col-12 m-0 p-0">
<app-nav></app-nav>
</div>
</div>
<div class="row content m-0 p-0">
<router-outlet></router-outlet>
</div>
<div class="row footer">
<app-footer></app-footer>
</div>
</div>
home.component.html:
<div style="margin-top: -40px !important;" class="pl-5 pr-5">
<img src="../../../assets/img_home.png" class="img-fluid" />
</div>
styles.css:
html, body {
height: 100%;
}
.main {
display: flex;
flex-flow: column;
height: 100%;
}
.main .row.header {
flex: 0 1 auto;
}
.main .row.content {
flex: 1 1 auto;
}
.main .row.footer {
flex: 0 1 auto;
}
And so is how the home screen looks: