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
Related
i'm new to web developement and i would like to know how i can make my file elements responsive and be able to fit any screen's size or resolution. Help is much appreciated! Here's my code :
`\<!DOCTYPE html\>
\<html lang="en"\>
\<head\>
\<meta charset="utf-8"\>
\<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"\>
\<title\>Untitled\</title\>
\<!-- CSS only --\>
\<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"\>
\</head\>
\<body style="background: #fadc74;"\>
<style>
.btn-solo {
background-color: #52D2B3;
background-image: src=url('C:/Users/BIS PLUS/Desktop/Maquette Traveler to CHINGUIT/img/no-alarm.png');
/\* background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 59px 46px;
padding-left: 41px;
font-weight: 550;
\*/
max-width: 40%;
max-height: 40%;
}
.btn-multi {
background-color: #D8DB36;
font-weight: 550;
max-width: 40%;
}
.btn-defi {
background-color: #FFCDCD;
font-weight: 550;
max-width: 40%;
}
.btn-classement {
background-color: #FF9211;
font-weight: 550;
max-width: 40%;
}
</style>
<div class="container mx-auto d-block">
<div class="row">
<div class="d-flex justify-content-center col-sm-12 col-md-12 col-lg-12">
<img src="/img/Logo.png" style="position: absolute;width: 370px;height: 357px;top: 164px;">
<div class="col-12 d-flex justify-content-center">
<button class="btn btn-solo shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px; top: 752px; border-radius: 20px; ">SOLO LIBRE</button>
<button class="btn btn-multi shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 868.74px; border-radius: 20px">MULTIJOUEURS</button>
<button class="btn btn-defi shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 1000.49px; border-radius: 20px">DÉFI CONTRE LA MONTRE</button>
<button class="btn btn-classement shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 1109px; border-radius: 20px">CLASSEMENT DES JOUEUERS</button>
\</div\>
\</div\>
\</div\>
\</div\>
\</div\>
<!-- JavaScript Bundle with Popper -->
\<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"\>\</script\>
\</body\>
\</html\>`
I tried fitting the image and the buttons in one page and be able to fit them regardless of any screen's resolution but since i'm new to bootstrap i don't know how.
Your site is responsive.
I was able to clean up some of your code so it renders a bit better, and things work much better now.
I noticed a lot of your closing tags had 2 slashes </div/> which could be a reason why you weren't seeing any responsiveness before.
Hope this helps somewhat! If you need any help with Bootstrap, feel free to send me a msg!
.btn-solo {
background-color: #52D2B3;
background-image: src=url('C:/Users/BIS PLUS/Desktop/Maquette Traveler to CHINGUIT/img/no-alarm.png');
font-weight: 550;
max-width: 40%;
max-height: 40%;
}
.btn-multi {
background-color: #D8DB36;
font-weight: 550;
max-width: 40%;
}
.btn-defi {
background-color: #FFCDCD;
font-weight: 550;
max-width: 40%;
}
.btn-classement {
background-color: #FF9211;
font-weight: 550;
max-width: 40%;
}
<!DOCTYPE html\>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body style="background: #fadc74;">
<div class="container mx-auto d-block">
<div class="row">
<div class="d-flex justify-content-center col-sm-12 col-md-12 col-lg-12">
<img src="/img/Logo.png" style="position: absolute;width: 370px;height: 357px;top: 164px;">
<div class="col-12 d-flex justify-content-center">
<button class="btn btn-solo shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px; top: 752px; border-radius: 20px; ">SOLO LIBRE</button>
<button class="btn btn-multi shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 868.74px; border-radius: 20px">MULTIJOUEURS</button>
<button class="btn btn-defi shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 1000.49px; border-radius: 20px">DÉFI CONTRE LA MONTRE</button>
<button class="btn btn-classement shadow w-30 p-2 mb-2 " type="button" style="position: absolute;width: 500px;height: 56.6px;top: 1109px; border-radius: 20px">CLASSEMENT DES JOUEUERS</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous" \>
</script>
</body>
</html>
I have a modal button next to my header and both elements have display: inline-block;. I am trying to make spacing and have the button go further to the right and keep the header element centered.
I tried adjusting the padding of the item container and that still did not work?
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="pageheadp">Click on any of the tabs to track your progress in that category. </p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
<li class="active"> Weekly Weight Δ
</li>
<li>Total Weight Δ
</li>
<li>Weekly Steps
</li>
<li>Total Steps
</li>
<li>Weekly Minutes
</li>
<li>Total Minutes
</li>
<li>Step Points
</li>
<li>Exercise Points
</li>
<li>Weekly Winners
</li>
</ul>
First add position: relative to .center to correctly position the button with absolute positioning.
And add this ruleset for .btn.btn-info.btn-md selector:
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
position: relative;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="pageheadp">Click on any of the tabs to track your progress in that category.</p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
<li class="active">Weekly Weight Δ</li>
<li>Total Weight Δ</li>
<li>Weekly Steps</li>
<li>Total Steps</li>
<li>Weekly Minutes</li>
<li>Total Minutes</li>
<li>Step Points</li>
<li>Exercise Points</li>
<li>Weekly Winners</li>
</ul>
You can add absolute positions to your button :
.btn.btn-info.btn-lg {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
right:15px;
top: 10px;
}
Perhaps Add a
<br>
in between the two divs. If not then maybe change this.
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
to
<button type="button" class="btn btn-info btn-lg ml-5" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
if not then change your css to
.btn.btn-info.btn-lg {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
right:15px;
top: 10px;
margin-right: 50px;
}
I tried to align text on the right side of image with
img {
float: left;
margin-right: 9px;
}
But it doesn't always work (on codepen it seems it works but not on my localhost)
full source code with Bootstrap and AngularJs
https://codepen.io/anon/pen/YZGjgq
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Details Layout</title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
<style>
/* start left side menu */
ul.menu-navigation {
font-size: 1.2em;
float: left;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background: #e25454;
border-bottom: 1px solid #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a {
display: block;
color: #fff;
text-decoration: none;
width: 205px;
padding: 10px 10px 10px 35px;
border-top: 1px solid #BF4E4E;
border-bottom: 1px solid #BF4E4E;
}
ul.menu-navigation li span {
display: none;
}
ul.menu-navigation li a:hover {
background-color: #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
/* end left side menu */
</style>
<style>
img {
float: left;
margin-right: 9px;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $window, $sce) {
$scope.sections = [
{id:'section1',name:'Section 1'},
{id:'section2',name:'Section 2'},
{id:'section3',name:'Section 3'},
{id:'section4',name:'Section 4'},
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl" >
<div class="container">
<div class="row">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accueil</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="media">
<div class="media-left">
<img src="http://www.freeiconspng.com/uploads/person-icon-5.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Mr DOE John</h4>
<a href="#">CEO <span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</div>
</a>
</h4>
</div>
<ul class="menu-navigation nav-tabs">
<li ng-repeat="section in sections">
<a href="#{{section.id}}" id="mnu{{section.id}}" class="mnu" data-toggle="tab" data-target="#{{section.id}}">{{section.name}}
<span>
Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
</span>
</a>
</li>
</ul>
<!-- End Left_Side_NavBar_Component_Html -->
</div>
<div class="col-sm-9 tab-content" >
<form class="form-group" action="index.html" method="post" id="sections">
<div id="myTabContent" class="tab-content"> <!-- start class .tab-content to create tab -->
<!-- start tab 1 -->
<div class="tab-pane in active" id="{{sections[0].id}}"> <!-- tab 1-->
{{sections[0].name}} content
</div>
<!-- end tab 1 -->
<div class="tab-pane " id="{{sections[1].id}}"><!-- tab 2 -->
{{sections[1].name}} content
</div>
<div class="tab-pane " id="{{sections[2].id}}"><!-- tab 3 -->
<!-- start tab 3 content -->
{{sections[2].name}} content
<!-- end tab 3 content -->
</div>
<div class="tab-pane " id="{{sections[3].id}}"> <!-- tab 4 -->
{{sections[3].name}} content
</div>
</div> <!-- end class .tab-content to create tab -->
</form>
</div>
</div>
</div>
</body>
</html>
Override .media-left css class, add float:left in it.
.media-left{
float:left
}
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'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 -->