I just downloaded Bootstrap 3 Dist which contains only css/js/fonts.
I created index.html and pasted the OffCanvas example, all works well so far.
I then changed the included navbar with the Fixed Top Navbar but now I see a 200px blank top space above the navbar that I cannot pinpoint using FireBug.
Screenshot
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/offcanvas.js"></script>
You need to add navbar-fixed-top to the navbar class:
<div class="navbar navbar-default navbar-fixed-top " role="navigation">
Related
I am using an online template for used my project. When I run my application, my template is working perfectly.
The problem is when I give a route to go to another page of my application for example (area/controller/action) then its not showing any image on my view page which I expected.
ere is my _Layout page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>#ViewData["Title"] - UBC</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
/>
</environment>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"
/>
<link rel="stylesheet" href="~/theme1/css/all.min.css" />
<link rel="stylesheet" href="~/theme1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/theme1/slick/slick.css" />
<link
rel="stylesheet"
type="text/css"
href="~/theme1/slick/slick-theme.css"
/>
<link rel="stylesheet" href="~/theme1/css/templatemo-style.css" />
</head>
<body id="servicesPage">
<div
class="parallax-window"
data-parallax="scroll"
data-image-src="theme1/img/1.jpg"
>
<div class="container-fluid">
<div class="row tm-brand-row">
<div class="col-lg-4 col-11">
<div class="tm-brand-container">
<i class="fas fa-4x fa-pen tm-brand-icon"></i>
<div class="tm-brand-texts">
<h1 class="text-uppercase tm-brand-name text-light big-stone">
UBC
</h1>
<p class="small text-light">We Bring The Best For You</p>
</div>
</div>
</div>
<div class="col-lg-8 col-1">
<div class="tm-nav">
<nav
class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent text-dark"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="testimonials.html"
>Testimonials</a
>
</li>
<li class="nav-item green-highlight active">
<div class="tm-nav-link-highlight"></div>
<a
class="nav-link"
asp-action="Index"
asp-controller="Home"
>Contact <span class="sr-only">(current)</span></a
>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Testimonials header -->
<section class="row" id="tmServices">
<div class="col-12">
<div
class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
data-parallax="scroll"
data-z-index="101"
data-image-src="img/people.jpg"
>
<div
class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header"
>
<h2
class="text-uppercase tm-services-page-title tm-testimonials-page-title"
>
The University Of British Columbia
</h2>
<p class="tm-services-description mb-0 small">
Number One University Of The Whole World
</p>
</div>
</div>
</div>
<div class="col-12">
<div class="tm-bg-black-transparent tm-services-detail-box">
<p>
Aenean convallis justo purus, id pulvinar enim finibus vitae.
Fusce et bibendum nisi, vitae mollis turpis. Aliquam tellus mi,
maximus vel orci imperdiet, convallis cursus tortor. Donec
sollicitudin metus sit amet nisl rhoncus, id ultrices risus
interdum. Proin mollis nulla nulla, ac cursus enim ornare a.
Cras quis porta lectus. Pellentesque eu ultrices arcu. Proin ac
tristique dui. Praesent mi odio, aliquam ac leo sit amet, dictum
sodales diam.
</p>
<p>
Quisque commodo, orci eget suscipit vestibulum, metus orci
fringilla urna, eget dignissim justo odio sit amet tellus. Morbi
dapibus molestie massa nec congue. Etiam lacinia pretium psuere.
Integer sodales porttitor lobortis. Nam vestibulum vestibulum
lectus non pulvinar. Vivamus eget sapien vitae magna lobortis
rhoncus molestie sit amet est. Fusce ultrices justo vitae
blandit consequat.
</p>
</div>
</div>
</section>
<section class="row tm-contact-row"></section>
<section class="row tm-testimonials-section">
<div class="col-12 tm-carousel">
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit mattis placerat cursus sed ac
urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu
velit semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit placerat cursus sed ac urna.
Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit
semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
</div>
</section>
<section>
<div class="container tm-bg-black-transparent tm-services-detail-box">
<partial name="_CookieConsentPartial" />
#RenderBody()
</div>
</section>
<!-- Call to Action -->
<section class="row tm-testimonials-cta" id="tmCallToAction">
<div class="col-12 tm-call-to-action-col">
<img
src="theme1/img/call-to-action-3.jpg"
alt="Image"
class="img-fluid tm-call-to-action-image"
/>
<div class="tm-bg-white tm-call-to-action-text">
<h2 class="tm-call-to-action-title">
Vivamus sollicitudin tellus
</h2>
<p class="tm-call-to-action-description">
Maecenas maximus tellus in dolor auctor tristique. Nam hendrerit
posuere laoreet. Aliquam erat volutpat. Nulla eros est,
imperdiet vel feugiat non, ullamcorper mattis nulla.
</p>
<form action="#" method="get" class="tm-call-to-action-form">
<input
name="email"
type="email"
class="tm-email-input"
id="email"
placeholder="Email"
/>
<button type="submit" class="btn btn-secondary">
Get Updates
</button>
</form>
</div>
</div>
</section>
<!-- Page footer -->
<footer class="row">
<p class="col-12 text-white text-center tm-copyright-text">
Copyright © 2020 App Landing Page. Designed by
TemplateMo
</p>
</footer>
</div>
<!-- .container-fluid -->
</div>
<script src="~/theme1/js/jquery.min.js"></script>
<script src="~/theme1/js/parallax.min.js"></script>
<script src="~/theme1/js/bootstrap.min.js"></script>
<script src="~/theme1/slick/slick.min.js"></script>
<script>
$(function () {
$(".tabgroup > div").hide();
$(".tabgroup > div:first-of-type").show();
$(".tabs a").click(function (e) {
e.preventDefault();
var $this = $(this),
tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
others = $this.closest("li").siblings().children("a"),
target = $this.attr("href");
others.removeClass("active");
$this.addClass("active");
$(tabgroup).children("div").hide();
$(target).show();
// Scroll to tab content (for mobile)
if ($(window).width() < 992) {
$("html, body").animate(
{
scrollTop: $("#first-tab-group").offset().top,
},
200
);
}
});
$(".tm-carousel").slick({
dots: true,
infinite: false,
arrows: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1024,
settings: {
arrows: false,
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
],
});
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
When I run my application, my output is:
when I giving routing for my application, then I found an unexpected output.
my all picture and especially background picture was gone. what's the solution?
The images are using paths relative to the URL. For example when using 'theme1/img/1.jpg' and on the page Admin/Subject; the web browser will look for the image in Admin/Subject/theme1/img/1.jpg
By appending / to the start of image; the web browser will look for image in root of folder. e.g: 'theme1/img/1.jpg'
After reading into some methods regarding the matter of the title of this question, I found out that I could use the .mx-auto class to center the navigation in Bootstrap 4. This solution works perfectly except that it has one drawback, namely the brand size in front of the navigation.
In this given example I show you what I mean by using the .mx-auto class by changing it from .mr-auto on the <ul> tag of the navigation in Bootstrap and the drawback I refered to earlier.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<!--Applying mx-auto here, makes the navigation go somewhat to the middle: -->
<!--<ul class="navbar-nav mr-auto"> to-->
<ul class="navbar-nav mx-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>
</ul>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
</main>
<footer class="container">
<p>© Company 2017-2018</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
https://jsfiddle.net/8j7c0ac5/
(Make sure to view the result in a full page view due to Bootstrap's responsiveness to small windows, disabling the navigation bar version I am refering to).
As you might see the navigation appears to be correctly centered, however if a brand would be larger or if you would be inspecting the DOM, you will notice how the navigation <ul> element is actually not really centered in the middle of the page, but moved a bit to the right because of the brand space required to the left of the navigation.
What is the best way to approach a solution for this? How could I center my navigation exactly in the middle without regard of brand size and without touching the way the navigation would look like on a mobile screen?
Edit:
If I want the page to look exactly like the example, except I want the navigation to be exactly centered, would I need to require the use of position and/or media queries to prevent mobile screen size being changed? The given examples on some of the other answers do add elements to the DOM and I just don't want mobile view to change the way it is.
So: [brand][navigation]
Or: [brand][navigation][nothing]
Achieving this requires the following code according to ZimSystem's answer:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark justify-content-center">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100" id="navbarsExampleDefault">
<ul class="navbar-nav w-100 justify-content-center">
<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>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
</ul>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
</main>
<footer class="container">
<p>© Company 2017-2018</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
https://jsfiddle.net/jxtg3j44/
Try to apply this to .collapse on your large screen media query position: absolute; left: 0; right: 0; so it will not affect smaller devices
I would my Bootstrap 4 webpage to have max width of 960px, including the top navbar. I have tried to enclose everything within the body with a div with max-width set. However, then this "body div" is left aligned. I would like the "body div" to be in the middle with whitespace around when the view port width is larger than 960px.
How would this be best achieved?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Max body width</title>
</head>
<body>
<div id= "body-div">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<button class="btn btn-primary" onclick = "toggle();">Toggle max-width</button>
<script type="text/javascript">
function toggle(){
var div = $('#body-div');
if(div.css('max-width') !== "960px"){
div.css('max-width', '960px');
}
else{
div.css('max-width', '');
}
}
</script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p><p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</body>
</html>
https://jsbin.com/towapid/1/edit?output
To center align a div like that, all you need to do is add a margin:auto; to the #body-div. The margin is calculated based on the width of the div.
So in your css, you just need to add this:
#body-div{
margin:auto;
}
Here's a way to do it in Bootstrap 4:
Note: this solution doesn't use your body-div or any other hacks because there's no need for any hacks. This can all be done with native Bootstrap classes alone.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row no-gutters">
<div class="col col-lg-10 offset-lg-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
<p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Here's an alternative version (you might like this better):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col mx-5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
<p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
I have a psd template that i would like to convert to a responsive site using bootstrap.
The template width is 1920px and the bootstrap grid is a 1170px bootstrap grid with 12columns with 15px margins left and right.
But in the design some things like the logo in this example and a part of the menu stands out of the grid, how do i interpret this design then? Or is this wrong design? Am I correct if i think the design should be between the columns?
template
Generally, the menu and logo are included in the <nav> which comes before <div class="container">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2017</p>
</footer>
So the grid width is only referring to the width of the content in the container.
I am trying to design page layout by using bootstrap css. I have lost already four days but I cannot do perfectly. I am falling two problems like below:
How can I make Bootstrap columns all the same height?
Scroll bar is underneath because of top nav bar not fixed.
The image of my problem below:
I have used following code .........
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<section class="main">
<div class="container-fluid">
<div class="row row-one">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris
tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
</div>
</div>
<div class="row row-two">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris
tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
</div>
</div>
</div>
</section>
<footer class="navbar navbar-inverse navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span>
</li>
<li><span class="glyphicon glyphicon-user"></span>
</li>
<li><span class="glyphicon glyphicon-calendar"></span>
</li>
<li><span class="glyphicon glyphicon-comment"></span>
</li>
<li><span class="glyphicon glyphicon-star"></span>
</li>
</ul>
</footer>
</body>
</html>
CSS:
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: 0px 0;
}
.navbar {
margin-bottom: 0px;
}
.main {
height: 100%;
overflow-y: scroll;
padding: 0px 0;
}
footer .navbar-inverse {
background: #5f5f5f;
}
/*Prevent the Footer from Collapsing*/
footer .navbar-nav {
float: left;
margin: 0;
}
footer .navbar-nav > li {
float: left;
}
footer .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
/*END: Prevent the Navbar from Collapsing*/
.row-one {
/*do not use display: table-row;*/
}
.row-two {
/*do not use display: table-row;*/
}
.row-one > .col-xs-12 {
background-color: gray;
}
.row-two > .col-xs-12 {
background-color: bisque;
}
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Precaution:
Avoid display: table, table-row, and table-cell.
Avoid JavaScript code.
Plunker
css should be for example
.row-one{
height:500px;}
.row-two{
height:500px;}
as that is the container of the text it would make them alot taller, obviously customise to your own needs