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 -->
Related
I'm currently working on a Watch2Gether clone that looks fine on medium and large devices, but once you get to the phone view, everything looks awesome until you scroll left and find a massive whitespace on the right side. I'm not too sure why this is happening, I tried changing the margin and padding on some items which helped with the UI, but there's still a huge whitespace when you scroll which looks really bad. Any idea how to fix this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Description -->
<meta name="description" content="Watch Youtube videos live with your friends, easily, for free!">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.ico">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css" />
<title>Room</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">WatchWithFriends</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create">Create Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<input autocomplete="off" id="paste" name="paste" class="form-control form-control-md"placeholder="Paste Video URL Here" aria-label="Search">
<button id="watch" class="btn btn-outline-success waves-effect" type="submit">Watch</button>
</div>
</nav>
<div class="section">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 main-section">
<h1 id="roomBasic"><span id="name"></span><span id="users"></span></h1>
<div id="player"></div>
</div>
<div class="col-lg-4 col-md-5 col-sm-12">
<div id="chat-holder">
<div id="mario-chat">
<a id="leave" href="/" class="btn btn-primary btn-block btn-lg leave">Leave Room</a>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<form action="" id="chat-form">
<input
type="text"
id="message"
placeholder="Message"
required
autocomplete="off"
class="form-control form-control-lg"
/>
<button class="btn btn-black btn-block" id="send" onclick="reload()">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-md-8">
<h3 id="welcome-room">Welcome to your room!</h3>
<p class="room-info-p">
To invite a friend, just copy the link below. To change their name they
just have to replace the name in the "username" field. Ex:
username=Billy -> username=Ryan. They can also join using the "Join Room" page.
</p>
<div class="input-group mb-3">
<input id="urlInfo" type="text" class="form-control" placeholder="Url">
<div class="input-group-append">
<button onclick="copyUrl()" class="btn btn-md btn-outline-dark m-0 px-3 py-2 z-depth-0 waves-effect" type="button" id="button-addon2">Copy</button>
</div>
</div>
<p class="room-info-p">To play a new video, paste the URL into the form in the navigation bar and press watch!</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>
<%- include('partials/footer') %>
CSS:
/* room page */
#name {
color: #575ed8;
}
#roomBasic {
font-weight: 600;
}
.section {
height: 80vh;
}
#mario-chat {
max-width: 500px;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.05);
border-radius: 2px;
}
#chat-holder {
margin: 11vh 3vh;
}
#chat-window {
height: 50vh;
overflow: auto;
background: #f9f9f9;
}
#sentText {
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#sentText p {
font-size: 1.1rem;
margin-bottom: 0.1px;
}
#feedback p {
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong {
color: #575ed8;
}
#mario-chat input {
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-size: 16px;
}
#send {
background-color: #292b2c;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
}
#player {
margin: 30px 30px;
border: 1px solid #ddd;
height: 62vh;
width: 100%;
}
.main-section h1 {
margin-left: 30px;
margin-top: 20px;
}
.info {
margin: 30px 30px;
}
.leave {
background: #575ed8;
font-size: 18px;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
/* info section */
.info {
height: 50vh;
font-family: "Roboto", sans-serif;
}
#welcome-room {
font-weight: 600;
}
I got the same issue and this meta tag belon helped me :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Or
//from another topic
It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.
from http://getbootstrap.com/css/ :
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.
From : Twitter bootstrap white gap on right side of page
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 have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>
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;
}
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/