Bootstrap 4 Beta Container fill - html

My current page looks like this: https://i.imgur.com/Lnuf5sM.png
I want a div container between top navbar and the footer.
So that all the green content is a div.
Because I want a centered box in the middle of the green content (It will be a login form). The thing is, that I don't know how to do that.
If im creating a <div> under my <nav>, the div behind the navbar (its not visible).
This is my Code and css:
<!doctype html>
<html lang="de">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
Test
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
<!-- Javascript always on bottom -->
...
</body>
And this is my CSS
body
{
background-color: #417239
}
I don't see the container. And in Developer mode of my Browser, the div is here:
https://i.imgur.com/m6kgVae.png
Why isn't it under the navbar? It should fill all the green content (resizable).
And How I can create a block which is in the middle of the green content? (That's why I need a "main" div).

Because .fixed-top and .fixed-bottom class, your content hide behind nav. You should set margin from top, to move your content to visible area:
#content {
margin: 100px auto;
text-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container" id="content">
<div class="row">
<div class="col-sm">
Login Form
</div>
</div>
</div>
<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>
https://jsfiddle.net/wuzbj1w6/1/

#Luranis This would help you.Center align the div using bootstrap 4 helper classes.
<div className="container-fluid bg-dark">
<div className="row h-100 justify-content-center align-items-center bgColor">
<div className=" col-sm-6 col-md-6 col-lg-4 text-center">
<form role="form">
//form fields
</form>
</div>
</div>
</div>

Check out https://v4-alpha.getbootstrap.com/examples/signin/ . This should get you going in the right direction.
The div is sitting beneath you navbar because you need to add some padding for the top of your page with css.

Related

Bootstrap Navbar overlap using transforms in Safari

I'm struggling with the problem of a transformed div overlapping a bootstraped navbar, illustrated below. Does anyone know why this could be happening?
It happens in safari but not in Firefox or Chrome. It also doesn't happen when there are no transforms applied to the div.
I'm using bootstrap 4 and tailwind.css. I've included the code below. Thanks.
Grateful for any pointers, thanks.
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
nav item
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
Can you please check the below code link? Hope it will work for you. You have to add position and z-index in the parent element .place-self-center and its child element .place-self-center .bg-transparent.
Please refer to this link: https://jsfiddle.net/yudizsolutions/Lj482t1p/2/

Cant Make the Image fit Parent Element

I'm new to bootstrap 4. I'm trying to build a responsive website using bootstrap for practice. I have an issue with my image not resizing to fit the screen.
<html lang="en">
<head>
<!-- Required Meta Data -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;700&display=swap" rel="stylesheet">
<!-- Bootstraps CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Custome CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
CANDY
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navLinks" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUR
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="text-white text-center d-none d-lg-block">
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
</div>
</div>
<div class="col-lg-6 px-0">
<img class="img-fluid" src="imgs/img1.jpg" alt="Hand Donut">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- JQuery First, Then Popper.js, then Bottstarp JS -->
<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.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In this my image is not covering the entire column space and leaving a portion.
even when i resize the screen to medium resolution image is not covering full screen
when i try to add css to it they are being crossed of.
CSS File
body{
background: #f5d9d5;
font-family: "Nunito", sans-serif;
}
#mainNavbar{
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link{
color: white;
}
#mainNavbar .nav-link:hover{
color: #EA1C2C;
}
#mainNavbar .navbar-brand{
color: #EA1C2C;
}
<img class="img-fluid" style="float:right;" width="100%" src=...>
This will make the image fit the parent div
and should probably solve your issue

How to override Bootstrap CSS Style to Customise using CSS [duplicate]

This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 1 year ago.
I have this navbar in all of bootstrap:
.navbar {
background-color: aqua;
}
<!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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
My problem is when i have the code in my boot.css file:
The background of the navbar is still the dark colour that was implemented in the nav tag. How can I override bootstrap css styling and customise my own.
You could try changing the color by using id. If you want to change many elements at once this may not be the best solution for you tho.
Simply add the id of your choice in this line (id="navigationID in this example):
<nav class="navbar navbar-expand-md bg-dark navbar-dark" id="navigationID">
Then declare the background color you want in css for this id:
#navigationID{
background-color:aqua !important;
}
Here is a working version of what i'm talking about
https://jsfiddle.net/q6fb7k5o/
You have to remove the bg-dark class from the <navbar> element, and replace it with one of the bootstrap background color classes, like .bg-primary or some other color. For example:
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
Or you can make your own, such as:
.bg-aqua {
background-color: aqua !important;
}
and add it as a class to the <navbar>:
<nav class="navbar navbar-expand-md bg-aqua navbar-light">
Note: the navbar-dark and navbar-light classes will make the text in your navbar white or black, depending on which one you choose.
Here is the Bootstrap Navbar Color Scheme documentatation here.
bootstrap bg-dark has there own style with !important so that if you want to override bootstrap style you have to put more specification than bootstrap style or you can remove those bootstrap style.
see below details,
How can I override Bootstrap CSS styles?

Bootstrap css fixed header no space

I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!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">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}

Bootstrap col-md-12 not wrapping the whole width of screen

I am creating a navigation bar and placed a banner below it but they are not 100% wide. I want both of them to wrap the 100% width.
HTML(header.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="col-md-12" style="margin-bottom: 0px;">
<nav class="navbar navigation_bar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>MENUITEM1</li>
<li>MENUITEM2</li>
<li>MENUITEM3</li>
<li>MENUITEM4</li>
<li>MENUITEM5</li>
<li>MENUITEM6</li>
<li>MENUITEM7</li>
</ul>
</center>
</div>
<div class="col-md-3"></div>
</div><!-- /.navbar-collapse !-->
</div><!-- /.container-fluid !-->
</nav>
</div>
Index.php
<?php include "header.php" ?>
<div class="col-md-12">
<img class="img-responsive" src="img/banner_1.png" width="100%">
</div>
Note: I may have added few additional classes but they are used to change the colors only, layout is not at all touched.
Also, i tried to add row class above col-md-12 but it result in scrolling page left to right and vice versa.
I am wondering how can i make the nav bar and banner 100% wide. After inspecting col-md-12 its width is 100% but i am not sure why it is not working.
Thanks in advance.
JSFiddle
col-md-12 has a default padding values....padding-left: 15px and padding-right: 15px.
If you want to remove these defaults for bootstrap, add an additional class to the same div with padding: 0.
Here's a JSFiddle: http://jsfiddle.net/v42e2/
as of Bootstrap 3.1 you can use the class container-fluid to have things stretch across the entire screen
<div class="container-fluid">
<div class="row">
//your code for nav here
</div>
</div>