I want to create a page where i can have a div fullscreen with a background image using bootstrap just like Endomodo's site
Since i just begin boostrap i downloaded some samples on startboostrap website and tried to manage what i want. My problem is that the menu and the content are shown in the page but my div doesn't (and so the image).
My html/css :
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.full {
background: url(bg3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.header-image {
display: block;
width: 100%;
text-align: center;
background: url('http://placehold.it/1900x500') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 130px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.headline h2 {
font-size: 77px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.featurette-divider {
margin: 80px 0;
}
.featurette {
overflow: hidden;
}
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
.featurette-heading {
font-size: 50px;
}
footer {
margin: 50px 0;
}
#media(max-width:1200px) {
.headline h1 {
font-size: 140px;
}
.headline h2 {
font-size: 63px;
}
.featurette-divider {
margin: 50px 0;
}
.featurette-image.pull-left {
margin-right: 20px;
}
.featurette-image.pull-right {
margin-left: 20px;
}
.featurette-heading {
font-size: 35px;
}
}
#media(max-width:991px) {
.headline h1 {
font-size: 105px;
}
.headline h2 {
font-size: 50px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-image {
max-width: 50%;
}
.featurette-image.pull-left {
margin-right: 10px;
}
.featurette-image.pull-right {
margin-left: 10px;
}
.featurette-heading {
font-size: 30px;
}
}
#media(max-width:768px) {
.container {
margin: 0 15px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 25px;
}
}
#media(max-width:668px) {
.headline h1 {
font-size: 70px;
}
.headline h2 {
font-size: 32px;
}
.featurette-divider {
margin: 30px 0;
}
}
#media(max-width:640px) {
.headline {
padding: 75px 0 25px 0;
}
.headline h1 {
font-size: 60px;
}
.headline h2 {
font-size: 30px;
}
}
#media(max-width:375px) {
.featurette-divider {
margin: 10px 0;
}
.featurette-image {
max-width: 100%;
}
.featurette-image.pull-left {
margin-right: 0;
margin-bottom: 10px;
}
.featurette-image.pull-right {
margin-bottom: 10px;
margin-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full - Start Bootstrap Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="full">
</div>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">This First Heading
<span class="text-muted">Will Catch Your Eye</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Second Featurette -->
<div class="featurette" id="services">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Second Heading
<span class="text-muted">Is Pretty Cool Too.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Third Heading
<span class="text-muted">Will Seal the Deal.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In order to make a div full size in bootstrap you need to use the container-fluid class. You can get a full page width responsive image div by using the following code.
<div class="container-fluid" style="padding: 0">
<div class="banner img-responsive"
style="background-image: url('http://res.cloudinary.com/dhlsxlkrc/image/upload/v1447118604/spring-purple-flowers-1080p-hd_dg4ncq.jpg'); height: 400px;">
</div>
So put this code in where you have <div class="full"></div>
Related
I am trying to make add a sticky footer on the default Carousel Bootstrap 5 example.
The issue is when the content of a page is limited, the footer becomes way to big.
Also, when the windows is resized the footer also changes accordignly.
I've tried several solutions prosposed here but nothing really worked.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
color: black;
text-align: center;
font-size: large;
display: flex;
flex-direction: column;
justify-content: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">HOME</li>
<li class="nav-item">CAR LISTING</li>
<li class="nav-item">ABOUT US</li>
<li class="nav-item">CONTCAT US</li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>
Finally I found the solution from this thread The trick was at the body and then the position tag on the .footer is not required anymore.
main {
flex: 1;
}
body {
color: #5a5a5a;
display: flex;
min-height: 100vh;
flex-direction: column;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
width: 100%;
height: 60px;
color: black;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">HOME</li>
<li class="nav-item">CAR LISTING</li>
<li class="nav-item">ABOUT US</li>
<li class="nav-item">CONTCAT US</li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>
I have the page which has section, nav, article. The section contains nav and article. As of now the nav and article occupy the full page. But what I need is the article and nav should be in the center of the page.
What I referred to is https://www.w3schools.com/html/html_layout.asp and developed the web page.
My html code looks like this
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
My css looks like this
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
By refering this CSS Getting The Article Center have included margin-left: auto; margin-right: auto; in the 'section'
section:after {
content: "";
display: table;
clear: both;
margin-left: auto;
margin-right: auto;
It didnt give me the expected output what i want.
The expected output is:
The nav and article should be in the middle of the page.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
</body>
</html>
What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page
You did right, just one mistake - you didn't account padding in your width. Please try.
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: calc(30% - 40px);
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: calc(70% - 40px);
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
I'm sure that you do need the padding, so I'd suggest just removing the float: left; and width: 70%; in your article and let it fill the rest of the place automatically :
section {
max-width: 100%;
}
nav {
float: left;
width: 30%;
height: 300px;
/* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
padding: 20px;
background-color: #f1f1f1;
height: 300px;
/* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
Thanks I have found the solutions for it. I have added the margin-left and margin-right auto in section after. But Now what I tried is I have added these two lines in the sections.
section {
max-width: 80%;
margin-right: auto;
margin-left: auto;
}
I didn't do any changes other than this and it worked.
I've added a separate variant with a flexbox. It's easy to implement and you need to worry about width and paddings.
/* Create two columns/boxes that floats next to each other */
section {
display: flex;
flex-direction: row;
}
nav {
/* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
min-width: 30%;
}
article {
padding: 20px;
background-color: #f1f1f1;
flex-grow: 1;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
section {
flex-direction: column;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img src="" alt="">
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula orci. Quisque in diam quis risus pellentesque sagittis sed sit amet mauris. Nullam ante nulla, pulvinar sit amet efficitur vitae, porttitor et est. Donec bibendum massa feugiat aliquet rutrum. Maecenas et ante vitae dolor dapibus luctus. Sed eget risus nisi. Praesent ultrices velit eu nisi faucibus ultrices. Suspendisse in facilisis odio.
</p>
<p> Donec at odio sit amet nulla bibendum ornare pulvinar vitae nulla. Curabitur eu erat et nulla vehicula porta. Curabitur quis luctus magna. Nullam vestibulum pretium risus eget accumsan. Nullam commodo turpis massa, tincidunt tempus lacus maximus non. Pellentesque facilisis finibus urna ut volutpat. Etiam placerat urna at venenatis bibendum.</p>
</div>
</article>
</section>
So I have been searching everywhere for different solutions to this issue, and I am now not sure whether it is the way I have written out my HTML. I am using PHP to include the navigation file and the footer file into all other files, on the index.php page (Homepage), the sticky footer works and stays at the bottom of the page regardless of content, however every other page, the footer is at the bottom but when content is added, it remains in the same place and just covers the content instead of getting pushed down.
Header HTML
<?php echo '
<html>
<head>
<script src="/*/*/jquery-3.3.1.min.js"></script>
<script src="/*/*/jquery-ui.min.js"></script>
<link href="/*/*/bootstrap.min.css" rel="stylesheet">
<link href="/*/*/jquery-ui.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<title> * </title>
</head>
<body>
<div id="wholeNav">
<div class="navBar">
Videos
</div>
<div class="navBar">
<h2 class="headerMain"><a id="pageTitle" href="index.php">*</a></h2>
</div>
<div class="navBar">
Photos
</div>
<div id="leftNav" class="socialNav">
Instagram <span class="displayNoneMobile">nameHere</span>
</div>
<div id="middleNav" class="socialNav">
YouTube <span class="displayNoneMobile">nameHere</span>
</div>
<div id="rightNav" class="socialNav">
Twitter <span class="displayNoneMobile">nameHere</span>
</div>
</div>
</body>
</html>
';?>
Footer HTML
<?php include 'headnav.php' ;?>
<?php echo '
<div id="footer">
<div class="footerInfo topTwo">
About
</div>
<div class="footerInfo topTwo">
Legal
</div>
<div class="footerInfo bottomFour">
Contact
</div>
<div class="footerInfo bottomFour">
Instagram
</div>
<div class="footerInfo bottomFour">
YouTube
</div>
<div class="footerInfo bottomFour">
Twitter
</div>
<div id="copyrightInfo">
<p>© All Content Owned By * - Website Designed By *</p>
</div>
</div>
';?>
Other Page HTML
<?php include 'headnav.php' ;?>
<div id="container">
<div class="headerDiv">
<h3 class="headerMainTwo">Terms & Conditions</h3>
</div>
<div class="infoBox">
<p class="legalTerms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque. Donec ultrices tincidunt arcu non. Quis ipsum suspendisse ultrices gravida dictum fusce. Luctus venenatis lectus magna fringilla urna porttitor rhoncus.
</p>
</div>
<?php include 'footer.php' ;?>
</div>
Footer CSS
html{
position: relative;
min-height: 100% !important;
}
body{
margin: 0;
padding: 0;
font-family: 'Amaranth', sans-serif !important;
overflow-x: hidden;
}
#footer{
height: 200px;
background-color: #d8445e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
Other Page CSS
.headerDiv{
margin-top: 15vh;
width: 100%;
background-color: #d8445e;
height: 10vh;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
border-top: 2px solid #FFF;
}
.infoBox{
margin-left: 15%;
width: 67.7vw;
height: 50vh;
position: absolute;
margin-top: 28vh;
font-size: 16px;
}
Thank you for taking the time to read this, I understand it may be a duplicate post however I have looked at so many posts about this issue and none of those fixes seemed to help my site, so thought it best to ask myself.
I have some difficulty on the responsiveness of a page.
As you can see in the following code when I inspect responsiveness using Google developer tool, the menu bar will disappear after the width go below 768px?
But I want really have the menu bar in the smaller screen like phones with the width of 414px ...
/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->
.navbar,.navbar-collapse,.navbar-brand,.nav,#aboutlink,#print-link{
background: #332A85;
color: #ffffff;
text-align: right;
}
#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
transition-property: background-color, color;
transition-duration: .2s;
transition-timing-function: ease-out;
background-color: #332A85;
color: #fff;
}
#print-link {
pointer-events: none;
cursor: default;
}
.ccusa_container{
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
color: black;
font-size: 15px;
font-family: 'Open Sans';
text-align: justify;
background-color: white;
}
.jumbotron {
background-color: black;
border: 2px solid black;
text-align: center;
height: 450px;
color: white;
font-family: 'Open Sans', sans-serif;
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
}
/*-- # = ids -*/
html, body {
height: 0%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: white;
color: black;
}
h2, h3 {
font-size: 1.2em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
p {
margin: 10px;
text-align: left;
}
a.header1 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #fff;
}
a.body1{
color: purple;
}
hr {
display: block;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
}
.closeinfo {
padding-top: 8em;
padding-left: 8em;
padding-right: 8em;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: black;
color: #fff;
text-align: center;
height: 300px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td, th {
padding: 8px;
text-align: left;
border: 1px solid black;
}
th {
text-align: left;
}
/*mobile responsivenes*/
#media (max-width: 550px) {
navbar-fixed-top {
width: 400px;
}
#menu {
width: 400px;
position: sticky;
}
h4 {
display: none;
}
.navbar, .navbar-fixed-top, .navbar-header {
width : 100%;
background: #332A85;
color: #332A85;
}
.mapboxgl-canvas-container {
align-content: center;
}
}
<!DOCTYPE>
<html>
<head>
<meta charset = 'utf8'>
<title>Operations - About</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Begin Mapbox requests -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- end project-specific asset calls -->
</head>
<body>
<div>
<!--Navbar-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand"> Project Work</div>
</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 class="nav"> Map</li>
<li class="nav"> About</li>
<li class="nav"> Data</li>
</ul>
</div>
</nav>
</div>
<!----jumbotron---->
<div class="jumbotron">
<h3>vitae non volutpat mi nisl amet in sapien enim eget quam sodales nunc nulla ligula tortor integer pretium vitae sit purus ultricies nec vitae nec quam nunc mauris felis turpis blandit risus nunc felis ornare morbi non id cras per eros dignissim orci aenean elit libero sed morbi pellentesque a libero morbi curabitur in in at cum aliquam sed in libero nam mi amet tincidunt sit sit in eros arcu bibendum tortor eleifend vulputate nisl duis turpis erat tincidunt rhoncus sit sit nulla nascetur in in vulputate neque dignissim nisl mauris wisi ac elit esse per diam nam morbi eros auctor ut lacinia libero malesuada justo sed odio montes dolor duis in maecenas faucibus amet
</h3>
</div>
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify" style="background-color:##C0C0C0">
</div>
<div class="col-md-1 justify"></div>
</div>
<!--Center buttons: GitHub MapBox ATTOM-->
<div class="col-md-12 text-center" style="background-color:##C0C0C0">
<div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify">
<br><br>
</h3>
</div>
<div class="col-md-1 justify"></div>
</div>
<div class="col-md-12 text-center">
<div class="col-md-2 text-center"></div>
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
<br>
<center align="center">Follow #CCharitiesUSA <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
</p>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
<br><br>
</div>
<div class="col-md-2 text-center"></div>
</div>
<br><br>
</div>
</body>
</html>
How we am I improve the responsiveness is my question?
There are 2 solutions to your problem.
The first one and the nice one is something that bootstrap already supports, you're just missing some code to make it work. You have a working demo here
You just need to add the button that will be displayed when the menu is collapsed. Please check the Fiddle example. I also applied some CSS to .navbar-header and .navbar-default .navbar-nav > li > a just to have a example look nice.
<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>
In case you don't want the collapsed menu supported by Bootstrap, you will have to hardcode some CSS classes which is a bit ugly. Here you have an answer that might help you.
http://codepen.io/abravo227/pen/MbzxBW
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script type="text/javascript"></script>
</head>
<body>
<div class="navWrapper">
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div><!--End of Nav-->
<a id ="home" class="smooth"></a>
<div id="page1">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<h1 class="firstTitle text-primary text-center">Hi, I'm First Last</h1>
<h3 class="subTitle text-center">The most interesting man in the world</h3>
<img src="imgage.jpg" class="firstImg center-block img-rounded img-responsive" alt="First Last Resume">
</div>
<div class="col-xs-4 linkedIn"><div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="#linkedin-info"><a class="LI-simple-link" href='www.linkedin.com'>First Last</a></div></div>
</div>
<div class="row" id="quote">
<div class="col-xs-4"></div>
<div class="col-xs-4"><blockquote><p><em>"Striving for excellence every day, in everything that I do."</em></p><footer>First Last</footer></blockquote></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--End of Page 1-->
<a id ="about" class="smooth"></a>
<div id="page2">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 aboutMe"><i class="fa fa-commenting-o" aria-hidden="true"></i>
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--end of page 2-->
</body>
</html>
CSS:
#nav {
position: fixed;
width: 100%;
height:50px;
text-align: center;
background-color: gray;
z-index: 1000;
}
#nav ul {
display: inline;
}
#nav li {
display: inline;
}
#nav a {
padding: 14px 16px;
display: inline-block;
color: white;
font-family: sans-serif;
}
#nav a:hover {
background-color: #0C5DA5;
}
#nav a:active {
text-decoration: underline;
color: yellow;
}
blockquote {
text-align: center;
position: relative;
}
#quote {
padding-top: 15px;
}
.linkedIn {
top: 30px;
float: right;
}
.firstTitle{
font-family: lobster, monospace;
color: blue;
}
.subTitle {
position: relative;
top: 0px;
font-family: lobster, monospace;
color: black;
font-size: 15px;
}
.firstImg {
position: relative;
width: 264px;
height: 296px;
border-color: gray;
border-width: 15px;
border-style: solid;
top: 0px;
}
#page1 {
padding-top: 40px;
height: 800px;
}
#page2 {
height: 800px;
background-color: red;
}
Would anyone be able to help me understand why my second page does not open up directly under the nav bar but instead a little bit underneath it? Really spinning my wheels on this one and havent been able to find anything searching.
Thanks in advance!
This is the css for div #page1:
#page1 {
padding-top: 40px;
height: 800px;
}
You need to add padding-top: 60px; on #page2 for your about me page to display properly. You can change the size of the padding as you wish. You need to add the padding because you need to count for the height of the navigation bar when you jump to a part of the page with id. The browser will jump so that the div you are jumping to align exactly to the top of your window. But your navigation bar takes up 50px in height, which is why part of your div #page2 is covered.
Here's my modification: http://codepen.io/anon/pen/WoYmVq
--
Or, you can create an empty div with id #page2 before your current #page2 div, and change your current #page2 div to some other id/class. Give the #page2 div a height of 50px. Now when you click on "About me", you will jump to the empty #page2 div, which will be covered by your navigation bar
Here's a demo: http://codepen.io/anon/pen/VmVNLx