This is what I have tried.
body{
background: lightblue;
padding:0px;
margin:0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-serif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.6rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
No matter what I change I'm not able to remove that bottom padding.
Also, I am not able to get that exact look as per the image. Does the image have a different font-family?
My expected output is as shown below.
Thank you
reduce the line-height:
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.7rem;
line-height: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
After so many trials, finally got it.
Thank you everyone for your help.
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 49px;
vertical-align: -1.2rem;
line-height: 0.4;
font-family: sans-serif;
}
button{
padding: 0px;
height: 35px;
padding: 0px 8px 0px 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="mt-2">
<span/>New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I attach a snipped below, as you can see, the 2 buttons show a different height, I would like them to have the same height when I change the page size, and be on the same line.
I don't want to just say height: 100px, because when I open it on a phone it would deform.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.dropbtn {
background-color: #264653;
border: none;
color: white;
padding: 0.1%;
text-align: center;
cursor: pointer;
width: 100%;
flex-grow: 1;
display: block;
}
.dropdown {
position: relative;
display: block;
width: 100%;
}
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div style="width: 100%; height: 100%;" class="container-fluid">
<div class="dropdown" style="width: 50%; float:left; height: 100%;">
<button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
</div>
<div class="dropdown" style="width: 50%; float:right; height: 100%;">
<button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>
</body>
Thank you very much for your help.
you can use bootstrap container for it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
</div>
</div>
</div>
<div style="width: 100%; height: 100%;" class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/pk78ntze/
I have layout with feature list content box, in desktop version it looks pretty fine, but in smaller versions i have problems pad / mobile and that four words with icons just breaking. I think it was not the best solution for this content box layout, what is the best and cleanest way to do this?
I need same look for desktop and for mobile.
Expecting result:
.container {
padding: 0;
}
padding: 71px 0px 0px 0px;
img {
margin-bottom: 6px;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #363636;
text-align: center;
margin-bottom: 7px;
}
p {
font-size: 16px;
line-height: normal;
color: #363636;
}
a {
font-size: 14px;
color: #333333;
border-bottom: 1px solid #ef5300;
text-decoration: none;
padding-bottom: 2px;
}
.col-lg-12 {
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: solid 1px #e9e9e9;
}
<!doctype html>
<html lang="en">
<head>
<!-- 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>My title</title>
</head>
<body>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 h-100">
<img src="icons/furniture.png" class="mx-auto d-block">
<h2>Nestandartinių baldų gamyba</h2>
<div class="row">
<div class="col-lg-7">
<span class="far fa-check-square"></span>Privačios paskirties
<span class="far fa-check-square"></span>Viešosios paskirties
</div>
<div class="col-lg-5">
<span class="far fa-check-square"></span>Korpusiniai
<span class="far fa-check-square"></span>Minkšti
</div>
</div>
<p class="text-center">Naudojamos medžiagos<span class="icon-rightcircle"></span></p>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
If you want the same "2 rows 2 columns" layout for those list feature box for all desktop and mobile, here's the simple css grid approach:
.list-feature {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="list-feature">
<span class="far fa-check-square">Privačios paskirties</span>
<span class="far fa-check-square">Korpusiniai</span>
<span class="far fa-check-square">Viešosios paskirties</span>
<span class="far fa-check-square">Minkšti</span>
</div>
I've been working on a website and I can't get the navbar at the top to display above everything else. It displays above the first header and p tag but after that when scrolling more it displays under the images and headers that are in the bootstrap 4 grids. I have tried setting the z-index to stupidly big numbers, setting the position to absolute and setting the z-index to a big number again, but neither of those approaches worked. I know I have set the background of the div/navbar to black but it still won't cover up the images/text. How can I fix this?
TL;DR: my navbar won't display above any content in my bootstrap rows and i've tried everything, how do i fix this?
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
.navigation {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
background-color: black;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding: 20px;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigation li a:hover {
text-decoration: none;
color:#ddd;
}
.navigation li a:active {
text-decoration: none;
color:#ddd;
}
.active {
color:#fff;
}
.navline-active {
height: 5px;
width: 100%;
background-color: #fff;
margin: auto;
}
#headerline {
height: 10px;
width: 70%;
background-color: #fff;
margin: auto;
}
.no-a-style {
color:white;
}
.no-a-style:hover {
text-decoration: none;
color:grey;
}
.navheader {
color:white;
padding-right: 10px;
font-size:25px;
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer {
text-align: center;
color: lightgrey;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-bold {
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.body {
color:white;
}
.body p {
font-size:18px;
}
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-container {
background:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Add z-index property for your sticky class in css and set it to a high value. That will keep it above anything else.
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Run code snippet
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<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.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!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.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>