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
Related
I am trying to make a simple footer that is always at the bottom of the page. The content of the page will never exceed the screen size so no need to scroll down. (Basically there will be 5 different html pages and I want the footer and header to always be the same.)
However, once I make the footer "fixed", when I inspect the page in Chrome, the footer is no longer a part of the body or html layout.
I can get the footer to appear on the screen as I need to(using a wrap to set the width to 65% and centered) but I think the footer is supposed to be highlighted upon inspection when pointing on body and html.
Any idea why this is occurring? It seems to occur based upon the footer's position being changed to fixed.
Here is the HTML and relevant CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="index-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Play2Learn Home Page</title>
</head>
<body>
<header>
<h1>Play2Learn Logo</h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li>Anagram Hunt </li>
<li>Math Facts Practice</li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li>
<li>Login </li>
</ul>
</nav>
</header>
<main>
<div id="testimonial">Happy Clients Say...</div>
<div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
<div id="author">-Justin Jest</div>
<section id="grids">
<div id="grid1">
<h3 class="article-title">Anagram Hunt</h3>
<article id="article1">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
<div id="grid2">
<h3 class="article-title">Math Facts Practice</h3>
<article id="article2">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
</section>
</main>
<footer>
© 2021 Play2Learn
<i class="fas fa-envelope-square"></i>
<i class="fab fa-instagram-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
</footer>
</body>
</html>
footer {
border-top: 2px solid black;
width: 100%;
height: 60px;
font-size: 12px;
padding-top: 0.5rem;
bottom: 0;
position: fixed;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}
I think this is what you need: https://matthewjamestaylor.com/bottom-footer
Here it is integrated with your code:
html,body {
margin:0;
padding:0;
height:100%
}
#container {
margin-left:0.5em;
min-height:100%;
position:relative;
}
header {
padding:0.1px;
}
main {
padding-bottom:60px; /* Height of the footer */
}
footer {
border-top: 2px solid black;
width: 100%;
font-size: 12px;
padding-top: 0.5rem;
bottom:0;
position:absolute;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="index-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Play2Learn Home Page</title>
</head>
<body>
<div id="container">
<header>
<h1>Play2Learn Logo</h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li>Anagram Hunt </li>
<li>Math Facts Practice</li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li>
<li>Login </li>
</ul>
</nav>
</header>
<main>
<div id="testimonial">Happy Clients Say...</div>
<div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
<div id="author">-Justin Jest</div>
<section id="grids">
<div id="grid1">
<h3 class="article-title">Anagram Hunt</h3>
<article id="article1">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
<div id="grid2">
<h3 class="article-title">Math Facts Practice</h3>
<article id="article2">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
</section>
</main>
<footer>
© 2021 Play2Learn
<i class="fas fa-envelope-square"></i>
<i class="fab fa-instagram-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
</footer>
</div>
</body>
</html>
(Notice that the footer height is set in the padding-bottom for main.)
I have a html code like this:
<header>title</header>
<content class="container-fluid">
<div class="row">
<div class="col-sm-3 leftside">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-sm-9">
<div id="map"></div>
</div>
</div>
</content>
<footer>footer</footer>
I want show the content section of code in one monitor screen.
google map must be full screen (and responsive).
and also side menu must be full screen (for more rows, It must use scroll in it's columns)
how can I do it?
demo code sample
EDIT:
when I open the page by brower, I could see the header and the content (in full screen) and with scroll I can see the footer section.
Here you go... see snippet below. Also here https://jsfiddle.net/darrendiscovr/s1vp1348/ and without Google maps API error.
5 minutes reading the bootstrap docs https://getbootstrap.com/ will get you on the right track and makes learning their components a breeze.
var settingsItemsMap = {
zoom: 12,
center: new google.maps.LatLng(40.768516981, -73.96927308),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), settingsItemsMap);
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(40.768516981, -73.96927308),
draggable: true
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
nav {
background: red;
color: #fff;
}
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px 0;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid #eee;
background: lightblue;
}
main.col-sm-9.ml-sm-auto.col-md-10 {
padding: 0;
}
section.content {
padding: 2em;
height: 100vh;
}
#map {
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top">
<a class="navbar-brand">
Title
</a>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Last</a>
</li>
</ul>
</nav>
<main role="main" class="col-sm-9 ml-sm-auto col-md-10">
<section class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ante quam, accumsan vitae augue ut, pharetra placerat ligula. Nam sed lorem augue. Donec ipsum velit, mattis sit amet nibh eu, ultrices porta nulla. In dictum ex ligula, eu efficitur metus
pretium et. Aliquam convallis dictum justo in imperdiet. Praesent tincidunt orci et fringilla consequat. Fusce convallis, dolor in mollis gravida, leo risus hendrerit magna, id sagittis nisl tellus quis ex. Mauris rutrum aliquam eleifend. Nullam
dignissim dictum rutrum. Nam tristique mattis nunc nec pretium. Ut at maximus nibh. Donec vel semper sapien, eget semper neque. Maecenas felis magna, condimentum ac ipsum vitae, auctor egestas massa. Nunc vulputate accumsan sem et vehicula.
Nulla ac lorem congue tortor pharetra feugiat. Curabitur lacinia, nisl quis vestibulum convallis, lorem lectus bibendum elit, sed finibus sapien tortor a orci.
</p>
</section>
<section>
<div id="map"></div>
</section>
</main>
</div>
</div>
So, I'm trying to figure out how to make this website with Bootstrap(keep in mind I'm new to bootstrap) and the after figuring out how to put my nav bar on top of my carousel, everything worked out fine, but then when I tried to add content, it wouldn't pop up until I added a div tag, but once I did that it would go up to the top. I solved that by moving the nav code on top of the carousel. Now everything works the way I want it, but the carousel doesn't work. :/
Here's my code.
<!DOCTYPE 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">
<title>Kame Computers</title>
<!-- CSS -->
<link href="C:\Users\Madcat3277\Desktop\Kame Computers\Css\bootstrap.min.css" rel="stylesheet">
<link href="C:\Users\Madcat3277\Desktop\Kame Computers\Css\bootstrap-theme.min.css" rel="stylesheet">
</head>
<header>
<!-- Styles Declare the Carousel and font. -->
<style>
.navbar {
position: absolute;
top: 30px;
z-index: 10;
width: 100%;
}
#font-face {
font-family: 'swiss_721light_condensed';
src: url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.eot');
src: url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.eot?#iefix') format('embedded-opentype'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.woff2') format('woff2'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.woff') format('woff'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.ttf') format('truetype'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.svg#swiss_721light_condensed') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!-- End of Harry Styles. -->
<font size="4" face="swiss_721light_condensed">
</header>
<!-- Anything goes. -->
<body>
<!-- Start of the Navbar -->
<nav class="navbar navbar-clear">
<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" aria-expanded="false">
<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 <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" 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>
</nav>
</div> <!--End Nav -->
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item ad1">
<img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg">
</div>
<div class="item ad2">
<img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg">
</div>
<div class="item ad3">
<img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="span4">
<img class="img-circle" data-src="http://placehold.it/140/">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p><a class="btn" href="#">View details »</a></p>
</div><!-- /.span4 -->
<div class="span4">
<img class="img-circle" data-src="http://placehold.it/140/">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div><!-- /.span4 -->
<div class="span4">
<img class="img-circle" data-src="http://placehold.it/140/">
<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" href="#">View details »</a></p>
</div><!-- /.span4 -->
</div><!-- /.row -->
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-right" src="http://getbootstrap.com/assets/img/examples/browser-icon-chrome.png">
<h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
</body>
<script src="C:\Users\Madcat3277\Desktop\Kame Computers\JavaScript\jquery-2.1.4.min.js"></script>
<script src="C:\Users\Madcat3277\Desktop\Kame Computers\JavaScript\bootstrap.min.js"></script>
</body>
You just have Carousel as the id of the carousel and in the carousel controls your href is linking to #myCarousel so just change the id of the carousel to myCarousel and it should work also you have two end body tags and the scripts should go above the end body tag and no you have no end html tag
Your carousel is not working because the arrows are not linking to the correct slider ID in the href property. Change the property value from #myCarousel to the ID of your carousel, #Carousel:
<a class="left carousel-control" href="#Carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#Carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Question background:
I'm pretty new to Bootstrap and have been developing a site as of late and have run into an issues with the content of my page 'overlapping' the footer at the bottom when the window is resized to a 'mobile' device resolution.
The issue:
The following picture shows a maximized screen with no overlap.
Re-sized screen, footer overlap:
HTML:
I have a 'master page' which holds the footer, each page implements this.
<div class="row-fluid">
<div class="span12">
<div class="padding">
<h2>C#</h2>
<div class="row-fluid">
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectTwoInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 cSharpBackGroundColour">
<div class="container">
<div class="span12">
<div class="row-fluid">
<div class=" paddingTop">
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT:
Footer code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-social.css" rel="stylesheet" />
<link href="\CustomCSS\Footer.css" rel="stylesheet" />
<link href="\CustomCSS\HeroUnit.css" rel="stylesheet" />
<link href="\Bootstrap\FontAwesome\css\font-awesome.css" rel="stylesheet">
<link href="\Bootstrap\FontAwesome\css\font-awesome.min.css" rel="stylesheet">
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>Twitter’s Bootstrap with Ryan Fait’s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: auto;
}
.colour {
background-color: #272727;
height: 100px;
}
.imageCentering {
align-content:center;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
background-color: white;
}
.wrapper2 {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: white;
margin-left: 250px;
margin-right: 250px;
padding: 25px 25px 25px 25px;
}
.title {
margin-top: 40px;
padding-left: 5px;
font-family: 'Segoe UI';
color: white;
font-size: x-large;
}
.push {
height: 90px;
}
.pushtop {
height: 5px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 20px;
}
.buttonAlign {
align-content: center;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1</li>
<li>Proj2</li>
<li>Proj3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
#*</div>*#
<div class="colour">
<div class="row-fluid">
<div class="title">
Software Developer#*</div>*#
</div>
</div>
</div>
<div class="wrapper">
#RenderBody()
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="floatLeft">
<a><ul>About Me</ul></a>
<a><ul>Projects</ul></a>
<a><ul>Contact Me</ul></a>
</div>
<div class="floatRight">
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
Any help resolving this issue would be great. Please note I would also want the 'grey' background div - that holds the 3 images to be responsive.
you have several HTML code issues, I did a clean-up and also simplified things a bit for demo purposes (you may adjust at will, of course).
The HTML part:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About
</li>
<li>Contact
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1
</li>
<li>Proj2
</li>
<li>Proj3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="colour">
<div class="row-fluid">
<div class="title">Software Developer</div>
</div>
</div>
<div class="wrapper">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet rutrum leo quis aliquam. Sed pretium efficitur enim at ultricies. Nullam ullamcorper porta risus, quis imperdiet eros rutrum sit amet. Nullam in nisl bibendum, dignissim arcu quis, consectetur turpis. Cras luctus egestas ligula. Suspendisse dignissim diam a augue egestas pharetra. Donec viverra eu velit ut pharetra. Nulla suscipit, ante eget venenatis cursus, nulla erat congue tellus, faucibus cursus orci lacus sit amet urna. Nulla facilisi. Duis commodo porttitor sem. In hac habitasse platea dictumst. Integer dui elit, rhoncus vitae tincidunt nec, scelerisque ac dolor. Integer at ligula eget ligula scelerisque volutpat eget quis lorem.</p>
<p>Praesent ac sapien sit amet magna sollicitudin vestibulum et nec erat. Quisque consectetur vel dui ac dapibus. Praesent at sapien tristique augue tincidunt auctor sed non justo. Fusce ac venenatis mauris. Quisque lobortis neque a eros hendrerit consectetur ac id magna. Mauris non velit ante. Nunc orci lorem, auctor a orci a, luctus sollicitudin turpis. Phasellus ornare tempus felis eu pharetra.</p>
<p>Integer eleifend, sapien eu molestie tristique, nunc felis varius tellus, at congue magna sapien ut tortor. Maecenas sodales ultricies ligula sollicitudin cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet odio ex, ut luctus tortor mollis sit amet. Aenean rutrum consequat lorem eget porta. Aliquam lacus enim, congue ac condimentum sit amet, consequat a diam. Duis eget mauris id nisi molestie vulputate sit amet vel nulla. Curabitur ac feugiat enim, eu rutrum magna.</p>
<p>Suspendisse sed lorem ac leo volutpat sodales. Pellentesque erat ex, tincidunt eu urna ac, gravida convallis eros. Phasellus nisl purus, egestas quis ipsum id, ornare pharetra tellus. Nullam congue leo ex, nec sagittis dolor tempor nec. Sed convallis sem risus, a congue leo feugiat non. Integer placerat dui eget lorem eleifend, a gravida tortor tempus. Vestibulum at est tempor sem sollicitudin hendrerit. Etiam vitae mauris eget sapien pharetra mattis a quis metus. Mauris facilisis sapien non fringilla scelerisque. Fusce a odio ultricies, rutrum nunc quis, faucibus quam.</p>
<p>Donec sed est vitae elit dignissim gravida. Vivamus blandit eros ex, vel placerat dui ornare in. Nullam feugiat risus lectus. Cras sagittis dolor vitae vulputate accumsan. Sed arcu massa, tempor vel massa nec, vehicula pellentesque tortor. Suspendisse fringilla eros risus, a scelerisque neque tempor ut. In et velit sapien. Etiam porttitor aliquam arcu, ut mollis augue rutrum feugiat.</p>
</div>
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12 links">
<div class="floatLeft"> <a>About Me</a>
<a>Projects</a>
<a>Contact Me</a>
</div>
<div class="floatRight"> <i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
You had those <UL> elements before the footer's <A> and also an additional closing </div> on all sections. With the HTML cleaned, CSS is as simple as this:
.links .floatLeft a {
padding:30px;
background:#fc0;
}
footer, .wrapper, .push {
position:relative;
clear:both;
padding-top:20px;
}
See fiddle for complete code and preview
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">