How do I push down the left-most column a position-fixed according to navbar height which has fixed-top???
Here is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html,
body {
height: 100%!important;
}
.navbar-brand img {
filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
}
</style>
<style>
.scrollable {
overflow: hidden;
height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
}
.scrollable:hover {
overflow: auto;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
background-color: #FEFEFE;
}
::-webkit-scrollbar-thumb {
background-color: #6c757d;
}
</style>
<title>BS5 Layout</title>
</head>
<body class="bg-light">
<header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
<div class="col-12 col-md-3 col-lg-2">
<a class="navbar-brand text-primary px-2" href="#">
<img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
Brand
</a>
</div>
<nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
<ol class="breadcrumb mt-3 px-2">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Contacts</li>
<li class="breadcrumb-item active" aria-current="page">List</li>
</ol>
</nav>
</header>
<div class="container-fluid h-100">
<div class="row h-100">
<section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
This won't scroll all the way to bottom?!?
item<br>
...
Last item
</section>
<section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
Repeat this content and navbar disappears after X number of scrolls<br>
...
Last line<br>
</section>
<section class="h-100 col-md-4 col-lg-3 p-0 border-start">
SIDE
</section>
</div>
</div>
</body>
</html>
Thanks in advance :)
Body padding is required as your nav is fixed!
The fixed navbar will overlay your other content unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Include this line after the bootstrap stuff! Working demo and code!
Related
I'm trying to obtain a simple layout composed by a stack of header, main section, footer.
I'm using bootstrap 5.
The entire layout must cover all the available space in width and height, overflow (x and y) must be hidden.
Header and wrapper must take all the needed space.
Main section must be in between header and footer and must take all the available space.
Main section is composed by a sidebar and an area that will contain the main content.
Sidebar and main content are disposed side by side.
Sidebar must take 1/6 of the entire width available.
Main content must take the rest of available space in width.
Here is some code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content">
Main content
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I would like to show overflow-y for sidebar/main content when it's needed. But I would also like to preserve the position of footer.
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
Set the .content container as relative, then put content in inner div of absolute inset-0.
Edit: this is just an example, I was using tailwind syntax on the class, bootstrap might be slightly different classNames
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I am a bit new to bootstrap and would like some guidance regarding how to use "d-flex" to align the content center. I tried applying "d-flex justify-content-center" like what the documentation says but the alignments still does not work. Is there anything I am doing wrong? I attached an image below; looking for centered spacing after the "Testing!" so the pictures are more aligned in the center from top to bottom. I believe I got the horizontal alignment correct.
<div class="container">
<div class="row ">
<div class="col text-center">
<h1>Testing!</h1>
</div>
</div>
<div class="row body text-center">
<div class="col-6">
<h2>Shop Collections</h2>
<img class="img-fluid"src="images/rx782alloy.jpg" >
</div>
<div class="col-6">
<h2>Catalog</h2>
<img class="img-fluid" src="images/batmanbeyond.jpg" >
</div>
</div>
</div>
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/xz54x.png
Please check out this fiddle. I believe this will answer your question. I have given you a guideline that will clarify your concept regarding d-flex. The design is responsive, change the view to see the result.
https://jsfiddle.net/hilalrehan/9vyd6Lu2/140/
.adjust {
padding-top: 30px;
position: relative;
}
.text-area{
min-height: 139px;
}
.box {
padding: 0.2rem;
flex: 0 0 20rem;
}
.set{
flex-flow: wrap;
justify-content: center;
min-width: 20rem;
}
#media (min-width: 576px) {
.set {
max-width: none;
}
.box {
padding: 0rem;
}
}
#media (min-width: 1200px) {
.set {
justify-content: flex-end;
}
.box {
flex: 0 0 8rem;
}
}
<html>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-6 col-xl-6">
<h2 class="display-2"> Testing </h2>
<div class="d-flex set mx-auto ">
<div class="box">
<div class="text-area display-4 text-center text-white bg-success"> Shop Collections </div>
<div class="img bg-success"> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid"> </div>
</div>
<div class="box">
<div class="text-area display-4 text-center adjust-text black bg-warning"> <div class="adjust"> Catalog</div> </div>
<div class="img bg-white "> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid" > </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
I've added a footer onto a chat app i'm trying to make with socketio.
The issue I've got is that the markdown input group is not stretching to the page.
If i take out position: fixed; from the "footerr" class then it stretches to fit, but is no longer at the bottom of the page.
Ideally the footer will not go over the sidebar, will auto responsivly resize, aligned to the right and fit the whole "main" section of the page.
Can anyone help?
https://jsfiddle.net/fxyhgz7t/
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
You just need to add width: 100%; to .footerr
/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/templates/simple-sidebar)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
.togglebutton{
color:#FAFAFF;
background-color: #B0B5B3;
}
.sidebar{
background-color: #353B3C!important;
color: #C6C7C4;
}
.topbar{
background-color: #22577A!important;
color: #EEF0F2;
}
.mainpage{
background-color: #EEF0F2!important;
}
.message_remote{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
background-color: #A2999E!important;
}
.message_local{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
background-color: #22577A!important;
color:#FAFAFF;
}
.tooltip {
display:inline-block;
position:relative;
border-bottom:1px dotted #666;
text-align:left;
}
.tooltip h3 {margin:12px 0;}
.tooltip .right {
min-width:200px;
max-width:400px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:0;
color:#EEEEEE;
background-color:#444444;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .right {
visibility:visible; opacity:1;
}
.tooltip .right img {
width:400px;
border-radius:8px 8px 0 0;
}
.tooltip .text-content {
padding:10px 20px;
}
.tooltip .right i {
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
}
html, body {
font-family: 'Catamaran', sans-serif;
}
#wrapper {
overflow-x: hidden;
}
#sticky-footer {
flex-shrink: none;
}
.footerr {
position: fixed;
bottom: 0;
z-index: 1030;
width: 100%;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
#Jaocampoo's answer should work. A better solution would be adding a container-fluid class to the footer, while maintaining the .footerr class.
i am trying to create a responsive web site but i am stuck in one place that the images with a background-imaged mask are not functioning properly. It works fine with larger screens but in medium and small screens my headline and some of the images are not seen with the "masked" background image. So could you tell me where i am making the mistake? Is it coding or the method that i am doing wrong?
The pictures that how display the screen are at the bottom of this page.You can see in large screen there is no problem but in other screens you cant see the headline and only half of the images are shown and the background doesnt stretch to cover all images and headline!!!
enter link description here This is the website.You can see better what the problem is.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
}
else{
$(".navbar").css("background", "transparent");
}
})
})
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
.fixed-top .navbar-nav li a:hover {
color: red !important;
}
.fixed-top .navbar-nav li a:focus {
color: red !important;
}
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .navbar-nav li a {
color:red !important;
}
.fixed-top.scrolled .navbar-nav li a:hover {
color: red !important;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:16px;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; 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>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/ihover.css" >
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top ">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand red-text" href="#">BATU PARFÜM</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bayan Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Erkek Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unisex Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons ">
<li class="nav-item">
<!-- <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a> -->
<a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view hm-black-strong container-fluid ">
<div class="container-fluid full-bg-img d-flex align-items-center justify-content-center ">
<div class="row container-fluid d-flex align-items-center justify-content-center">
<div class=" col-lg-8 col-md-8 col-sm-8 text-center ">
<hr class="hr-light ">
<!-- Heading -->
<h1 class=" font-bold mb-2 white-text">Kokunu Keşfet</h1>
<!-- Divider -->
<hr class="hr-light pt-2 ">
</div>
<!--Grid row-->
<div class="row col-lg-8 col-md-8 col-sm-8 container-fluid text-center mt-5">
<!-- Top to Bottom-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4 ">
<h2 class="mb-4 font-weight-bold white-text ">Unisex Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/perfume1.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Bayan Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Erkek Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
</body>
</html>
small screen
medium screen
large screen
you can use media queries for smaller screens. Try this css for mobile phones:
header{
height: auto;
}
#intro{
padding: 0;
height: auto;
}
.full-bg-img{
position: relative;
}
I want to create a dashboard from scratch for learning purposes using Bootstrap 3.3.7. I have problem with the left hand menu. I want it to occupy the whole area it gets (col-lg-1 column and 100% height). My problem is that the min-height:100% with height: auto doesn't work, but min-height:xxx px works well.
I saw other posts here saying that min-height:100% should work.
What I'm doing wrong?
Here is the plunker.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<div class="container-fluid padding-left-zero padding-right-zero">
<div class="container-fluid padding-left-zero padding-right-zero">
<div style="margin-bottom: -20px;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class=" container-fluid row">
<div class="pull-left">
<a class="navbar-brand" href="/">Dashboard</a>
</div>
<div style="height: 50px; padding: 15px;" class="pull-right">
<select>
<option value="module">value</option>
</select>
</div>
</div>
</nav>
</div>
</div>
<div class="row container-fluid padding-left-zero padding-right-zero">
<!-- code of lenfthandmenu -->
<!-- <div class="col-lg-1 pull-left navbar-inverse fill">
<div ui-view="leftHandMenu"></div>
</div>-->
<div class="col-lg-1 pull-left navbar-inverse fill2">
<div ui-view="leftHandMenu"></div>
</div>
<div class="col-lg-11 pull-right">
<div ui-view="mainContent"></div>
</div>
</div>
<div>
<div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
</div>
</div>
</main>
</body>
</html>
Css:
/* Styles go here */
body {
padding-top: 50px;
}
.padding-left-zero {
padding-left: 0px;
}
.padding-right-zero {
padding-right: 0px;
}
li {
list-style: none;
}
.silver-text {
color: silver;
}
.min-width-100-percent {
min-width: 100%;
}
.fill {
min-height: 100%;
height: auto;
}
.fill2 {
min-height: 300px;
height: auto;
}
Apply absolute position property and height as 100% like below.
.fill2 {
position:absolute;
height: 100%;
}
DEMO