I'm trying to make a bootstrap template that fits entirely on one page with a vertical menu bar being the only scrollable element on the page, issue is the entire page is scrollable.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80%;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80vh;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>
Try this struct, following Bootstrap Documentation.
body, html, main {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.h-10v {
height: 10vh;
}
.h-80v {
height: 80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<header class="bg-secondary h-10v">
Banner here.
</header>
<section class="row bg-dark h-80v">
<div class="col-xs-12 col-sm-12 col-md-4 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 bg-light">
<p>This area content.</p>
</div>
</section>
<footer class="bg-primary h-10v">
This is footer.
</footer>
</main>
</body>
</html>
https://codepen.io/pauloserafimtavares/pen/jpdrBG
Related
I mentioned the bootstrap navbar fix code correctly. When I am scrolling the screen, my sections overflowing the navbar. Navbar is not yet fixed in the top of the page. Kindly confirm the changes should be made in bootstrap.min.css or we should change in HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RaLas</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/oldcss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" crossorigin="anonymous">
</head>
<body>
<!-- Start: Navigation Clean -->
<nav class="navbar navbar-light navbar-expand-md navbar-inverse navbar-fixed-top navigation-clean sticky-top">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1"><img src="assets/img/Logo_name.png" style="margin-left: -5px;height: 40px;width: 200px;">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active navbar-text" href="#home" style="color: #205D84;"><strong>HOME</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#aboutus" style="color: #205D84;"><strong>ABOUT US</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#services" style="color: #205D84;"><strong>SERVICES</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#contactus" style="color: #205D84;"><strong>CONTACT US</strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- End: Navigation Clean -->
<section id="home" style="padding-top: 0px;padding-bottom: 0px;">
<header id="homepage" class="masthead text-center text-white d-flex home" style="background-image: url("assets/img/homepage_Background_only.jpg");margin-top: 0px;padding-top: 0px;">
<div class="container my-auto" style="margin-top: 161px;">
<div class="row" style="margin-top: 150px;">
<div class="col-lg-10 mx-auto" style="margin-top: -150px;"><img src="assets/img/Ralas_logo_homepage_png.png" style="width: 316px;">
<h2 style="margin-bottom: 7px;">Welcome to RaLas</h2>
</div>
</div>
<div class="col-lg-8 mx-auto" style="margin-top: 10px;"><a class="btn btn-primary text-center btn-xl js-scroll-trigger home_page_button button_hover" role="button" href="" style="background-color: rgba(22,138,221,0);padding-top: 5px;height: 30px;font-size: 15px;">Follow us</a></div>
<!-- Start: social media Icons -->
<div class="row" style="height: 400px;margin-top: 30px;">
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/insta.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Instagram</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/facebook.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Facebook</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
<div class="login-card"><img class="profile-img-card" src="assets/img/whatsapp.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Whatsapp</p>
</div>
</div>
</div>
<!-- End: social media Icons -->
</div>
</header>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='contatcjs/sampjs.js'></script>
<script src='contatcjs/faq.js'></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</body>
</html>
Try to replace the class navbar-fixed-top with just fixed-top class in <nav class>
I am making a forum and faced with the problem that the top navigation bar overlaps the text on all pages of the site. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Forum</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand navLogo" asp-controller="Home" asp-action="Index"></a>
</div>
<div class="navbar-collapse collapse">
//Panel code
</div>
</div>
</nav>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
I am trying to remove padding using Boostrap 4 but having no success.
If you see this image it will make sense:
I am trying to remove the yellow padding that I believe comes from the fluid container.
I tried adding this:
pb-0 mb-0
^ The above are classes to force ZERO padding/margin but still the extra padding is there.
It just feels like it is not in balance....
Here is my HTML
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
Thanks for all help
The margin seems to dissapear when you add the mb-0 class to the <ol> element:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
</head>
<body>
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">Title</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Margin bottom added from class breadcrumb from bootstrap css you can remove it by using below css.
ol.breadcrumb{
margin-bottom:0;
}
Its because of default margin of ul and ol tag just add this css:
ul,ol{
margin: 0;
}
Please see the following code. I just want to center content with a footer that appears at the bottom, all of which is inside a background cover image. I've tried doing this with Bootstrap4 containers as well as d-flex configurations, all of which has been an abysmal fail. :(
Presently I'm using two columns that are stacked on top of each other but it doesn't work when you make the screen smaller in height. I'm hoping for the proper way to do this by actually centering content using the entire screen while maintaining a footer.
Also see here for a working demo: https://jsfiddle.net/m05heusn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>t-rex</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- bootstrap4 css should load first to be available globally -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
crossorigin="anonymous"></script>
<style>
html,
body {
font-family: 'Josefin Sans', sans-serif;
height: 100%;
}
#cover {
background-attachment: scroll;
background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'xyz');
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
<div class="container">
<a class="navbar-brand" href="#">
t-rex
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> <!-- navMenu -->
</div> <!-- container -->
</nav>
<div id="cover" class="h-100">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-12 align-self-center text-center">
<div class="display-1 d-none d-sm-block">
t-rex
</div>
<div class="display-3 d-block d-sm-none">
t-rex
</div>
</div>
<div class="col-12 align-self-end p-2">
<div class="d-none d-sm-block text-right">
Copyright © 2018 t-rex. All rights reserved.
</div>
<div class="small d-block d-sm-none text-center">
Copyright © 2018 t-rex. All rights reserved.
</div>
</div>
</div>
</div>
</div>
<!-- cover
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
crossorigin="anonymous "></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
</body>
</html>
In this code block there is "text-right" class:
<div class="d-none d-sm-block text-right">Copyright © 2018 t-rex. All rights reserved.</div>
So, change it to "text-center".
As far as I can see I've followed a w3 example exactly regarding bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). However with my following code, the tabs don't change when clicked. The only tab displayed is the active tab. I'm not hugely familiar with bootstrap so I imagine the solution may probably be simple.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<!-- <div id="tabs" class="container"> -->
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#student">Student</a>
</li>
<li>
<a data-toggle="tab" href="#employee">Employee</a>
</li>
<li>
<a data-toggle="tab" href="#admin">Admin</a>
</li>
</ul>
<div class="tab-content">
<div id="student" class="tab-pane fade in active">
<h1>TEST</h1>
</div>
<div id="employee" class="tab-pane fade">
<h1>TEST2</h1>
</div>
<div id="admin" class="tab-pane fade">
<h1>TEST3</h1>
</div>
</div>
<!-- </div> -->
</div>
</body>
</html>
The example from W3 is not working either! Try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/login.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
TEST 1
</div>
<div role="tabpanel" class="tab-pane" id="profile">
TEST 2
</div>
<div role="tabpanel" class="tab-pane" id="messages">
TEST 3
</div>
<div role="tabpanel" class="tab-pane" id="settings">
TEST 4
</div>
</div>
</div>
</body>
</html>
And check: https://getbootstrap.com/docs/3.3/javascript/#tabs for more information
EDIT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This line must go before bootstrap.min.js, like this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>