HTML
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Tournament</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="tournament">
<div class="round-1">
<div class="game">
<div class="contender-1">
P1
</div>
<div class="contender-2">
P2
</div>
</div>
<div class="game">
<div class="contender-1">
P3
</div>
<div class="contender-2">
P4
</div>
</div>
<div class="line">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
.contender-1,
.contender-2 {
font-family: Arial, sans-serif;
font-size: 12px;
width: 120px;
border: 1px solid #000;
padding-left: 2px;
background-color: #f1f1f1;
}
.contender-1 {
border-bottom: 0px;
}
.game {
margin-bottom: 16px;
}
.line {
float: left;
background-color: red;
height: 10px;
width: 210px;
border-bottom: 1px solid #000;
}
The line class is placed under the game div, and not right next to it.
I have no idea what's causing this. Is it the bootstrap css causing the issues? I have not touched it. Disregard all the other divs and whatnot, only game and line, I guess.
Or is there a better solution for creating lines going out of the box? I'm creating a tournament page so I need lines connecting the brackets. I hope you understand my post. I need lines on both sides of the two boxes.
EDIT: TUrning off the bootstrap css doesn't change anything. What's happening here?
Sketch: http://i.imgur.com/lya2htS.png
Normally you would place your content in the bootstrap grid. For example if you want a two columns grid. You can see here how they do it: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
If you do not want to use this grid and want to achieve the effect you are after. You need to float the game container also to left. Otherwise the game container will take the full width of its parent container or body, and push the line container down.
.game {
margin-bottom: 16px;
float: left;
}
See here the js fiddle: http://jsfiddle.net/sc8EJ/5/
Related
I've just started to teach myself some basic web design and have been trying to use Bootstrap 3.
I've been having issues with my navbar and accordion that seem to be based on the order of my CDN imports. I'm trying to include all imports I need in my navbar/header section so I don't need a >head< section on my other pages.
When I put them in the order I see in every thread I've come across they are in this order.
<script src = ...jquery/3.3.1/jquery.min.js"></script>
<script src = ...maxcdn../3.3.7/js/bootstrap.min.js"</script>
With this order my responsive navbar breaks and my hamburger menu no longer works but the accordion collapsible works fine. I understand that bootstrap needs to have jquery loaded first to use some of its features however in order to get my navbar to work I have to switch the two lines above. I believe that this is an issue stemming from the code of my navbar but have not been able to pinpoint the problem.
You can see the broken navbar here:
Broken Navbar/Hamburger menu
Here is my Navbar code:
<!DOCTYPE html>
<html>
<head> <!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="topnav" data-spy="affix" data-offset-top="0"
id="myTopnav">
<a href="http://cabins.cannondam.net/" data-toggle="tooltip"
title="Click here for information on Cannon Dam Cabins"
class="active">Cabins</a>
Store
FAQ <!--FAQ section with Accordian:
Cabins FAQ, Store FAQ,-->
Contact
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Any help or tips to improve would be great!
If you are using bootstrap, you don't need media query and JS, the class="navbar-toggle" do it by itself.
Take a look at this code, maybe it will help you:
<!DOCTYPE html>
<html>
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----Style---->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!----Script---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a{
width: 100%;
color: black;
}
.icon-bar{
background-color:black;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top" id="navbar_home">
<div class="topnav navbar-header">
<button type="button" id="nav-icon2" class="navbar-toggle" data-toggle="collapse" data-target="#myTopnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="topnav collapse navbar-collapse" id="myTopnav">
<ul class="nav navbar-nav navbar-center">
<li>Cabins</li>
<li> Store</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I do not think the issue has anything to do with the order in which you are calling external resources. It is more likely related to invalid source code or script conflicts.
Looking at the source code on your site I see several problems with your markup. You have two opening <html> tags and three opening <body> tags. It appears as if you are copying and pasting code snippets without fully understanding how the markup works. Also, you are including the Bootstrap framework, but not fully utilizing it on your page.
First, let's look at how your markup should be structured:
<!DOCTYPE html>
<html>
<head>
<!-- Metadata, external resource links, CSS, Javascript, etc. -->
</head>
<body>
<!-- Site Content -->
</body>
</html>
We begin with a DOCTYPE declaration. Everything else contained in an HTML page should begin with an opening <html> tag and end with a closing </html> tag. You should never have more than one set of HTML tags on any page.
I am not going to take the time to try and debug your code; it needs to be rewritten. I would start by utilizing Bootstraps built in navigation and eliminating your inline navigation script:
body, .container-fluid {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Cabins</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!-- Now We'll Add Your Accordians -->
<div class="container-fluid">
<div id="Accordian_Container" class="container">
<br><br>
<!-- This is the title of the page, Appears before accordian collapsible panel-->
<h2 id="PageTitle"><strong>Cabins</strong></h2>
<!--General Description of Cabins (or subtitle)-->
<p>Get away from it all at our spacious cedar cabins. All of our cabins can sleep up to six people all on one level. We have special suites available for large groups. Our cabins come fully furnished for your comfort and convenience. Our cabins are
well suited for weekend getaways, family vacations, family reunions, fishing trips, or company outings.</p>
<!--Specifing the type of collapsible/panel-->
<div class="panel-group" id="accordion">
<!--Beginning code for Collapsible Section 1 (Lakeside Cabin)-->
<div class="panel panel-default">
<!-- Adding stylization here affects the panel contents-->
<div class="panel-heading">
<h4 class="panel-title">
<!--Assigns relevent information to section header, including the collapse action and header name-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><span class="glyphicon glyphicon-chevron-right"></span>Lakeside Family Cabin</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Body of collapsible panel 1-->
<!-- Description of Lakeside Family Cabin -->
Lakeside Family Cabins are designed to sleep a maximum of 6 people comfortably all on one level. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1G8LY_ZfvVgFtW0UlvP-bnAaAXGPYTxsQ/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapisble Section 1-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 2(3 Room Cabin)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><span class="glyphicon glyphicon-chevron-right"></span>Three Room Lakeside Cabin</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Three Room Lakeside Cabin-->
3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably.They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Three Room Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1YzFGqScrcmS88pj_DVBOjNAIOpVFszY1/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Three Room Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapsible Section 2-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 3 (Poolside Cabins)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><span class="glyphicon glyphicon-chevron-right"></span>Poolside Family Cabin</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Poolside Family Cabin-->
Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
<!--Video Tour Header-->
Tour a typical Poolside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1-ImuBKm38NH528tVdYRr2JaYbxqIKylo/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Poolside Family Cabin today using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapsible Section 3-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 4 (Motel Rooms)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4"><span class="glyphicon glyphicon-chevron-right"></span>Motel Room</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Motel Room-->
Motel Rooms contain 2 queen beds and can accommodate up to 4 guests. Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.
<!--Motel Room Slideshow in place of video-->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--Picture 1-->
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1tc8T5RQiDgXYcwF15q1Chb69gU-69fUN" alt="Motel 1" style="width:100%;">
</div>
<!--Picture 2-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=105lHyZjyFc9pxQ_Mztjj0BFJ9ezTH2KK" alt="Playground and Poolside Cabins" style="width:100%;">
</div>
<!--Picture 3-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1u9XT6N5tuowChdtl7kxCG095Q4sqA7Jy" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<!--Left Control-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<!--Right control-->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of Collapsible Section 4-->
</div>
<!--End of Accordian-->
<script>
//When opening panel remove chevron-right, add chevron down
$('#accordion .panel-collapse').on('shown.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});
//When closing panel remove chevron-down, add chevron right
$('#accordion .panel-collapse').on('hidden.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});
</script>
</div>
<!--End of of accordians container-->
</div>
</body>
</html>
NOTE: I also enclosed your iframes in responsive divs to keep them from overflowing your content area.
I am fairly new to bootstrap and I am trying to figure out some code for a test website. I have ran into an issue with bootstrap, I setup a element and put 2 elements into it. On the left is a paragraph (which I plan on changing to a larger element later), and on the right is an image (I don't think the dimensions matter). I noticed that the row element was not taking up full width of the screen and figured this was because of the elements it was inside of. I went into my CSS file to troubleshoot, set the row class' width to 100%, and went back to my site and opened up Chrome's dev tools. I noticed that the container div had a right and left margin on both sides which caused the row div to take up less space and center itself within the element of the container. I set both the left and right values for margin to 0px and went back to the site. The left margin had disappeared and although Chrome's inspect was showing there was no right margin either, it still appeared when I hovered over the container element. I don't think it is a specificity error as the left margin disappeared but not the right. I'm truly stumped. As I mentioned, I'm fairly new to Bootstrap so the issue may be in plain sight. I checked to make sure I typed all of my syntax correctly for margin right and it looked normal to me. The code I'm showing you, however, is without the modifications I made to the container and the row. The code I'm showing you is normal (apart from the container being centered).
If there are some odd spacing issues, I apologize. I manually spaced 4 times for each line of code so if there are 4 spaces where there shouldn't be, my apologies.
.header .jumbotron {
color: #fff;
background-color: #a1ff7c;
font-family: Roboto Condensed;
margin-bottom: 0px;
}
.navbar-default {
background-color: #78c45a;
border: 0px;
font-family: Roboto Condensed;
}
.gallery .container {
font-family: Roboto Condensed;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar- nav > .active > a:focus {
color: white;
/*BACKGROUND color for active*/
background-color: #78c45a;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle:hover {
background-color: #5a9344;
;
}
p {
font-family: Roboto Condensed;
}
<html lang="en">
<head>
<title>Hope's Seed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Sponsors
</li>
<li>Donate
</li>
<li>Services
</li>
<li>More
</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Try use 'container-fluid'
<title>Hope's Seed</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About</li>
<li>Sponsors</li>
<li>Donate</li>
<li>Services</li>
<li>More</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class = "gallery">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Live demo - https://jsfiddle.net/f39wurmn/1/
Hope this helps
set margin:0 for body in css. Some browsers has a default margin
body
{
margin:0;
}
I've got a Blade main template like this that allows me to use a single template to house a number of different containers like this:
<!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, maximum-scale=1, user-scalable=no">
<title>
#yield('title')
</title>
#include('libs.libs')
#include('google.analytics')
</head>
<body>
#include('partials.nav_sched')
<div class="container">
#yield('content')
</div>
#yield('schedule')
</body>
<div class="panel-footer navbar-bottom">
#include('partials.footer-sched')
</div>
</html>
#include('js.libs')
#include('js.add-class')
The problem with this is, my footer is way up in the middle of the page:
This is my partials/footer-sched:
<div class="container">
<p class="text-muted text-center">
Made with ♥ by Drexel Students for Drexel Students
</p>
<h6 class="text-muted text-center">
<small>
Contact Me
</small>
</h6>
</div>
I tried numerous things such as taking the footer out of the main body, using custom CSS:
.panel-footer{
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
}
I just have been unable to have the footer at the bottom of the page. I don't want a sticky footer, but I just want a footer that stays at the bottom of the page.
try using this:
add a new class 'contentHeight' to container div which contains all your content, or is the middle div between top navigation and footer at bottom.
add this at the bottom of you html code just before where body tag ends
<script>
var canvasHeight = $(window).height();
var navHeight = $('.nav').height();
//'nav' this should be replaced with class name which your navigation has in original
var footerHeight = $('.panel-footer').height();
var addHeight = canvasHeight - (navHeight + footerHeight)
$(document).ready(function (){
$('.contentHeight').css('min-height', addHeight)
});
</script>
The code you posted in your question shows <div class="panel-footer navbar-bottom">...</div> outside of closed </body> tag. Get this inside of it.
Remove any position: absolute; css from footer div to turn it back in normal flow of html.
you can use a bottom: 0; position: absolute in a .panel-footer, but this is not suit for all situation.
I think there're two easy solutions.
Edit #yield() section like a min-height:600px.
Add body { min-height: 800px; } in your css file.
anyway.. you have to fix code like below:
<div class="panel-footer navbar-bottom">
#include('partials.footer-sched')
</div>
</body>
</html>
I hope you'll solve problem. :-)
You can try adding this to your .panel-footer CSS: see working example.
position: absolute;
right: 0;
bottom: 0;
left: 0;
/**Styling: Non-Footer Related**/
h1 {
text-align: center;
}
.icon-up {
position: absolute;
right: 15px;
bottom: 15px;
color: white;
}
.icon-circle {
position: relative;
background: red;
padding: 20px;
border-radius: 50%;
}
/**Styling: Footer Related**/
div.panel-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<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>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Search for Class</h1>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<div class="panel-footer">
<div class="container">
<p class="text-muted text-center">Made with ♥ by Drexel Students for Drexel Students</p>
<h6 class="text-muted text-center">
<small>
Contact Me
</small>
</h6>
</div>
</div>
<span class="icon-up">
<i class="fa fa-calendar icon-circle"></i>
</span>
<!-- /top-link-block -->
I want to put an image on top of the footer, but my image is lying somewhere in the middle of the screen. I have tried vertical-align, wokaround using margin, but no success yet.
Here's jsFiddle
Here's my HTML structure,
<body id="extranav">
<div class="wrapper">
<nav class="navbar navbar-default">
<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="index.php"><img src="images/logo.png" ></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 navbar-right">
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>FAQ</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<br><br>
<div class="text-center">
<a href="#" class="fa icon fa-twitter fa-lg" ></a>
<br><br>
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
</body>
And the CSS
html,body
{
height: 100%;
/*font-size: 15pt;*/
font-family: 'Varela Round', sans-serif;
background-color: #fff;
min-height: 1024px;
}
.footer
{
background-color: #2D3339;
color: white;
}
.footer a
{
line-height: 2.8em;
}
.footer-links a,.footer-links p
{
color: #aaa;
text-align: center;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
.footer, .push {
height: 200px;
font-size: 15px;
}
.push
{
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}
Why don't you put the footer image div directly inside the footer? It will naturally fall right above the footer that way, then you just need to adjust the CSS so that the footer is 400px tall(200px for the image and 200px for the footer section below the image):
.footer
{
height:400px;
font-size: 15px;
background-color:#2D3339;
color:white;
}
.push
{
height:200px;
background:url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom;
}
JSFiddle
Do you mean like this?
Relevant HTML:
<div class="footer">
<div class="push"></div>
<br />
<br />
<div class="text-center">
<br />
<br />
<div class="footer-links">
Feedback
AboutUs
FAQ
<p>© All Rights Reserved</p>
</div>
</div>
</div>
Relevant CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -400px;
}
.footer {
height: 400px;
font-size: 15px;
}
.push
{
height:200px;
background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent;
}
I'm currently making a website using bootstrap, but at the end of the homepage's background image there is a piece of white space about 50px in length.
Is it possible to get rid of this strip of white space? I have provided my html and css code for the site. Help would be much appreciated.
HTML
<!-- html-->
<div id="title-page">
<div class="container">
<div id="nav" class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="pic-headings">
<h1 class=" text-center" ></h1><>
<br>
<h2 class=" text-center"></h2>
</div>
</div>
</div>
CSS
<!--css-->
#nav{
margin-bottom: 0px;
background-color: transparent;
border: none;
padding-right: 20px;
}
.navbar-brand{
color: #fff;
}
#title-page{
background-size: 100%;
background-size: cover;
background-image: url(stephen1.jpg);
color: #fff;
height: 830px;
margin-bottom: 0px;
}
#pic-headings{
padding-top: 200px;
text-align: center;
}
h1{
font-family: eb-garamond, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h2{
font-family: eb-garamond, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
On line 24 you have some stray characters <> which can't be helping your situation. And you may consider restructuring your code without the nested container classes and overall just not nesting your div's so deeply. In the process of doing that you will most certainly identify the problem.
Please post link or jsfiddle or more code, and which version of Bootstrap your trying to use to get more help.
this may or may not help get you started
<div id="header">
<div class="container clearfix">
<ul id="nav">
<li></li>
</ul>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span12">
something
</div>
</div>
</div>