<!DOCTYPE.html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heisenberg.svg" width="30" height="30" alt="">
</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Blog.html">Blog</a>
</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="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">soon..</a>
<a class="dropdown-item" href="#">soon..</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">soon..</a>
</div>
</li>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://github.com/heisenberg01010">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/social-media.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.linkedin.com/in/jai-lodha-3b63b4197/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/logos.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.instagram.com/mai_jai_/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/brands-and-logotypes.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
</ul>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<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>
</body>
</html>
I have tried my best but the "Learn more" button is not working under
<div class= "jumbotron">. There are three such buttons working under the carousel. I am using bootstrap to build a site. I think some properties are overlapping. I have used jumbotron from here https://getbootstrap.com/docs/4.4/components/jumbotron/. I have used carousel from here https://getbootstrap.com/docs/4.4/components/carousel/. Earlier there was no problem. I don't know how this bug came.
Please suggest some changes.
So the Problem is with the bootstrap files, you don't have the files of bootstrap 4,
if you have add the all links and bootstrap link to the head of html then it will work.
I have modified the code somehow so you can have the idea. !!!
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.4/getting-started/introduction">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.</p>
<a class="btn btn-primary btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</body>
</html>
The problem is: You added the elements with jumbotron class inside of carousel items. And this caused to place the elements with jumbotron class to be placed under the carousel controls.
I suggest to change the bottom of the carousel controls.
To fix the problem, add this script:
<script>
const computedStyle = window.getComputedStyle(document.getElementsByClassName('jumbotron')[0]);
const bottomOfCarouselAction = +computedStyle.getPropertyValue('height').replace('px', '') + +computedStyle.getPropertyValue('margin-top').replace('px', '') + +computedStyle.getPropertyValue('margin-bottom').replace('px', '');
document.getElementsByClassName('carousel-control-prev')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel previous control to the top of the jumbotron.
document.getElementsByClassName('carousel-control-next')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel next control to the top of the jumbotron.
</script>
Related
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</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="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<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>
</body>
</html>
"About" and "Contact" tab in the navigation bar are not acting like links. Earlier every tab was okay. Moreover, search button is also not working properly. Please suggest some changes.
I am using bootstrap for building this website and copied the navigation code from here https://getbootstrap.com/docs/4.4/components/navbar/.
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</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="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<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>
</body>
</html>
you have made a small mistake here I can tell you what is it.
You have your carousel navigation buttons outside of your #carouselExampleControls div, and as they are position absolute so they are overlapping to your menu. so just put your both carousel button in the main carousel div. that's it. Find the corrected code in the snippet.
I'm using Bootstrap v4.0.0-alpha.6 and I'm facing some issues with the navigation menu on Safari starting from 8 and down.
The logo at the left is an image and two buttons('Login', 'Sign Up') at the right are not shown on Safari, I used a live testing website for simulating Safari 6 and I inspected the element and I see that they are in the Dom and taking space in the header, But none of them is shown.
Here is a fiddle: http://jsfiddle.net/h6rc4d7g
Live preview:
.btn-red{
background: #d9534f;
color: #fff !important
}
<!-- Fontawesome 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap v4.0.0-alpha.6 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<!-- Bootstrap v4.0.0-alpha.6 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable fixed-top">
<div class="container hidden-md-down">
<div class="navbar-collapse clearfix">
<a class="navbar-brand float-left" href="#">
<img class="mt-1" src="http://placehold.it/1121x171/200" width="200" alt="logo">
</a>
<div class="text-center" style="margin: 0 auto; margin-top: 5px; ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hiw-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hiw-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
<div class="float-right ml-auto" style="margin-top: 5px; ">
<ul class="navbar-nav float-right ">
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-red nav-button" href="/new">Sign up</a>
</li>
</ul>
</div>
</div> <!-- .navbar-collapse -->
</div> <!-- .hidden-md-down -->
<div class="hidden-lg-up">
<a class="navbar-brand py-0 float-left mt-3" href="#">
<img style="margin-top: 7px" src="http://placehold.it/1121x171/200" width="150" alt="logo">
</a>
<a class="btn mobile_header_button float-left btn-red mt-3" href="/new">Sign up</a>
<a class="navbar-toggle navbar-toggler-right gray-light float-right" data-toggle="collapse-side" data-target=".side-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</a>
</div> <!-- .hidden-lg-up -->
</nav> <!-- .navbar -->
What is causing this issue and how to solve it?!
I have recently gotten a bootstrap 4 theme. I have been changing some files to work with flask. However I'm not able to figure out why my "main-container" div is falling below the nav bar when I change the page size to a more full size desktop browser size?
In the original bootstrap file the index.html file had the nav bar and page content on a single page. For flask I have moved most of this between three files layout.html, index.html and _navbar.html
I would like this to be on the right side of the nav bar when this is stretched to full desktop size but im not able to figure out what to change.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
Explore Pages
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
View Components
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
App PagesUtility Pages
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
Team Overview
</li>
<li class="nav-item">
Project
</li>
<li class="nav-item">
Single Task
</li>
<li class="nav-item">
Kanban Board
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
</div>
Divs by default have display: block which makes them positioned on top of one another.
In order to position them properly you could either:
Wrap them in a container div and use flexbox for positioning (Bootstrap row and columns),
Use floats (Bootstrap float classes)
Below is an example of using floats to position divs.
.container {
width: 500px;
}
.nav {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
.content {
float: left;
width: 70%;
height: 200px;
background-color: blue;
}
.clear {
clear: both;
}
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
<div class="clear">
</div>
</div>
So I was playing around with the new Bootswatch based on Bootstrap 4 but somehow the "Cards" have no margin and the dropdown in the menu doesn't work. Can someone explain to me what I'm doing wrong here? Do I have to add the margin myself? And why doesn't the Dropdown work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make <br>up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
The card margin doesn't have anything to do with this. The problem is with the JS.
I changed tether and Bootstrap alpha 6 JS to PopperJs and Bootstrap beta 2 JS. (see the Bootstrap docs)
I also added the class mt-3 to the container for some margin. Keep that if you want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make <br>up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
I tried to check the responsive design using chrome dev tool. But that is not working.
Whereas the same works fine when i resize the browser.
I could not identify what might be the issue? Could someone help me identify the issue?
Code is below
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 hidden-sm-down" style="background-color:#4E5B5C; color:#fff"><span><small>Heading heading heading 1</small></span></div>
<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#626F70; color:#fff"><span>Heading 2</span></div>
<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#475859; color:#fff"><span>Heading 3</span></div>
</div>
<div class="row" style="background-color: #2B3536;">
<div class="col-lg-2 col-md-2 col-sm-2 col-2 logo-div align-self-center"><img class="img-fluid" src="https://dummyimage.com/127x50/2b3536/fff"></div>
<div class="col-lg-7 col-md-8 col-sm-8 col-8">
<nav class="navbar navbar-wrapper navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
<div class="container">
<a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars fa-lg text-white"></i>
</a>
<!--<button class="navbar-toggler navbar-toggler-right" 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 pl-sm-2" id="navbarNavDropdown">
<ul class="navbar-nav header-nav">
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Header menu item 6</a>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
</div>
<div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
<div class="input-group">
<input class="form-control hidden-md-down"
placeholder="I'm looking for">
<div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
</div>
</div>
</div>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="First slide">
<!--<div class="carousel-caption d-none d-md-block">
<h3>...</h3>
<p>...</p>
</div>-->
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Screenshots are below.
Checking in Galaxy s5
Checking by resize the screen
Add viewport meta to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
VIEWPORT
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
The responsive design using chrome dev tool. But that is not working
CNTRL + F5 ( Force refresh the webpage ) and then check it.
You'll likely need to add viewport meta to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">