I made a sidebar which consists of 2 nav elements absolute positioned next to each other. At the bottom of my so-called "sub-sidebar," I have an image that acts as a dropdown. When I activate the dropdown the menu item itself always lays behind the so-called "main-sidebar". To make this clear, I have an illustration.
While it is supposed to look like this
In my CSS(Sass) I have never set any z-index whatsoever. What is causing this problem
CODE
.dashboard-sub-sidebar {
width: 64px;
background-color: #f9328e;
position: fixed;
display: block;
top: 0;
left: 0;
height: 100vh;
padding: 24px 0 24px 0;
}
.dashboard-sidebar {
transition: width 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
width: 250px;
height: 100vh;
background-color: #f9328e;
position: fixed;
top: 0;
left: 64px;
display: block;
padding: 15px;
color: $text-white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
<nav class="dashboard-sub-sidebar">
<div class="dashboard-sub-sidebar-container">
<div class="dashboard-sub-top-content text-center text-white">
<div class="dashboard-sub-top-logo">
LOGO
</div>
<div class="sidebar-icon-box slideout mt-4" data-slideout-block="search">
<i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>
</div>
<div class="dashboard-sub-user-content text-center">
<div class="sidebar-icon-box slideout mb-3" data-slideout-block="notification">
<i id="dashboard-sub-notification" class="fa fa-bell dashboard-sub-notification"></i>
</div>
<div class="sidebar-icon-box mb-3">
<i id="dashboard-sub-help" class="fa fa-question-circle dashboard-sub-help"></i>
</div>
<div class="btn-group dropright">
<img src="http://s3.amazonaws.com/images.seroundtable.com/google-dog-badge-1526987203.jpg" class="dashboard-sub-sidebar-user-image dropdown-toggle" alt="" width="40" height="40" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu">
<ul class="list-unstyled">
<li>Profiel</li>
<li>Account instellingen</li>
<li>Uitloggen</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<nav id="dashboard-sidebar" class="dashboard-sidebar shadow">
<div class="dashboard-sidebar-brand">
<h5>Logo bedrijf</h5>
</div>
<ul class="dashboard-sub-content list-unstyled">
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem active"><i class="fal fa-window-maximize"></i>Dashboard</li>
</a>
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-folder"></i>Projects</li>
</a>
<a href="#" class="dashboard-sidebar-link slideout slideout-item" data-slideout-item="clients">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-tie"></i>Clients</li>
</a>
<a href="#" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-friends"></i>Employees</li>
</a>
<a href="your_company.html" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-building"></i>My company</li>
</a>
</ul>
<button id="dashboard-sidebar-toggle" class="btn btn-light btn-sm shadow dashboard-sidebar-toggle"><i class="fal fa-arrow-left"></i></button>
</nav>
Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements.
In your example, as the tooltip's parent .dashboard-sub-sidebar is declared before dashboard-sidebar, this last one is automatically above .dashboard-sub-sidebar and his children due to order of appearance. Add a z-index to .dashboard-sub-sidebar will fix the issue.
Related
I have a navbar menu in Bootstrap 4. When I resize the page, it resizes after a certain size threshold, but before it collapses, the far-right item "Opportunities" in the navbar is being cutoff.
In other words, it's cutting off items - it eventually collapses if the window gets too small - but before that, it's cutting off. See photo here:
Is there an easy fix here? Code below..
/* ------------------------------Navigation------------------------------*/
/* Navigation pills */
#navPills li{
padding:6px 6px 6px 6px !important;
font-size: 14px !important;
}
#nav-pills ul{
}
/* Navigation pills text*/
.btn.btn-s-md.btn-white.m-b {
font-size: 14px !important;
letter-spacing: .04em;
}
.navbar {
background-color:#f7f7f7 !important;
padding-bottom:10px;
border-bottom:1px solid #E6E7E8;
-webkit-box-shadow: 0px 1px 2px rgba(159,159,155,0.4)
}
#toggle {
background-color:none;
color:black;
}
.nav-item {
text-align: right;
padding:0px 10px 0px 10px
}
.nav-link {
text-align:left;
font-size:14px;
color:#0c2d1c !important;
}
#navbarNav {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<body>
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="people.html" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="research.html" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="publications.html" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="teaching.html" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html" class="btn btn-s-md btn-white m-b">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
Based on Bootstrap 4 docs for Navbar example (https://getbootstrap.com/docs/4.0/components/navbar/), I would erase your li classes as they seem to cause the overlap with the edge of the viewport to happen.
If you put these classes on your ul element you will have the same lg collapse and styling of buttons. See code below for the changes I am referring to.
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id="navPills" class=" nav-pills navbar-nav ml-auto btn btn-s-md btn-white m-b">
<li>
<a href="index.html">ABOUT
</a>
</li>
<li>
<a href="people.html">
PEOPLE
</a>
</li>
<li>
<a href="research.html">RESEARCH
</a>
</li>
<li>
<a href="publications.html">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html">
MEDIA
</a>
</li>
<li>
<a href="teaching.html">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
I'm trying to get a card to be vertically centered between the search bar and the bottom of the viewport.
I've tried to make the body height 100%, but then it extends past the viewport and the user is able to scroll down into whitespace. I've tried to use align-content: center; on the parent container, but it doesn't change anything.
html.html
<body>
<div class="navbar navbar-expand-lg sticky-top">
<!-- nav info -->
</div>
<div class="container-fluid">
<!-- Title above search bar -->
<div class="row">
<div id="search-title" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<h3>Title</h3>
</div>
</div>
<!-- Search bar -->
<div class="row">
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
<!-- search form -->
</form>
</div>
</div>
<!-- No results -->
<div class="row">
<div id="no-results" class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto">
{% if term != '' and not cameras %}
<!-- if no results then tell user -->
{% endif %}
</div>
</div>
<!-- Resulting card from search -->
{% if camera %}
<div class="container align-center">
<!-- I would like this card to be vertically centered between the search bar and the bottom of viewport -->
<div class="col-xl-6 col-md-7 col-sm-8 col-8 mx-auto card myclass">
<div class="card-body">
<!-- info -->
</div>
</div>
</div>
{% endif %}
</div>
</body>
css
html, body {
height: 100%;
width: 100%;
}
.align-center {
align-content: center;
}
This is what it looks like right now. Notice how the border on the body is below the viewport.
You can wrap your card element inside a container(card-container) with position property set to relative. Give your card absolute positioning with top property set to 50%. Make sure your container has a height property specified.
Edit 2:
You can also use the flex-box feature of css to make your layout more reponsive. It will also resolve the issue that you are having on big screen. I have update the code inside the container and css classes applied to container section. Update your code accordingly and let me know.
.card-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 2px solid red;
}
.card-body {
flex: 2 0;
align-self: center;
border: 2px solid green;
}
.card {
flex: 1 1;
align-self: center;
}
.good-status {
color: #45A163;
}
.bad-status {
color: red;
}
<div class="card-container">
<div class="card mx-auto"></div>
<div class="card-body">
<h5 class="card-title text-center">Title</h5>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
Ping device
Go to webbooter page
</div>
<div class="card mx-auto"></div>
</div>
</div>
You can do this by setting up your page height. Actually height:100vh fills the page completely. As you have the navbar, calc the height of it and subtract it from 100vh in this way height:calc(100vh - (56px)).
To set your card to the center of the page, you can use position:absolute and transform:translate(-50%,-50%) property. It will align your card to the vertical and horizontal center. I will be aligned to center in all the devices too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.form-control-borderless {
border: none;
}
.form-control-borderless:hover,
.form-control-borderless:active,
.form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}
.centre{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#"><img class="img-responsive" src="/testing/users/images/logo.png"></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 ml-auto">
<li class="nav-item"><span class="fa fa-fw fa-home"></span> Home</li>
<li class="nav-item"><a href="/testing/users/account.php" class="nav-link"><span
class="fa fa-fw fa-user"></span> admin</a></li>
<li class="nav-item">
<a href="/testing/users/messages.php" class="nav-link">
<span class="fa fa-envelope"></span><i class="badge"></i> Message</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><span class="fa fa-fw fa-cogs"></span> <span class="caret"></span>Settings</a>
<div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
<a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span>
Account</a>
<a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin
Dashboard</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span>
User Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span
class="fa fa-fw fa-lock"></span> Permissions Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span>
Page Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span
class="fa fa-fw fa-envelope"></span> Messages Manager</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span>
System Logs</a>
<a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span>
Logout</a>
</div>
</li>
<li class="nav-item dropdown menu">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="fa fa-fw fa-lock"></span> menu
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item mx-auto" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container" style="height:calc(100vh - (56px))">
<br>
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<div class="col">
<input class="form-control form-control-lg form-control-borderless" type="search"
placeholder="Search topics or keywords">
</div>
<div class="col-auto">
<button class="btn btn-lg btn-success" type="submit">Search</button>
</div>
<!--end of col-->
</div>
</form>
</div>
<!--end of col-->
</div>
<div class="col-sm-6 centre">
<div class="card bg-light ">
<div class="card-body text-center">
<p class="card-text">Some text inside the card</p>
</div>
</div>
</div>
</div>
</body>
</html>
There's no reason to use height:100%, calc() or extra CSS. Use the flexbox classes available in Bootstrap 4. Set a min height on the body (min-vh-100), flex direction column, and then flex-fill to allow the container to fill the remaining height. The vertical centering will then work as expected.
<body class="d-flex flex-column min-vh-100">
<nav>
</nav>
<div class="container-fluid d-flex flex-column flex-fill align-items-center justify-content-center">
<div class="row">...</div>
</div>
</body>
https://www.codeply.com/go/3k7MBc10tb
Related: Bootstrap 4: How to make the row stretch remaining height?
I am wondering if someone can help me get started on how I could create a sidebar nav like on this template. I was thinking of buying the template and going through the code that way but I think it comes with a ton of stuff that might just confuse me.
I am trying to understand how make it so on a large screen you will see
or
but on mobile you will see the hamburger menu
So far I got this
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 collapse d-md-flex bg-light pt-2 h-100" id="sidebar">
<ul class="nav flex-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-cog"></i>
<span class="badge badge-dark">4</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
</div>
<div class="col pt-2">
<div class="row w-100">
<div class="col-12 pt-2" style="background:coral;">
</div>
</div>
<div class="row w-100">
fakdfkaf
</div>
</div>
</div>
</div>
This should get you started:
#sidebar {
max-width: 240px;
}
#sidebar nav {
width: 100%;
}
#media (max-width: 768px) {
#sidebar {
max-width: 48px;
}
#sidebar .nav-link span {
position: absolute;
opacity: 0;
}
}
#media (max-width: 576px) {
#sidebar {
max-width: 0;
overflow-x: hidden;
}
}
Proof of concept (I had to tweak your markup):
body,html {height: 100%;}
#sidebar {
max-width: 240px;
}
#sidebar nav {
width: 100%;
}
#media (max-width: 768px) {
#sidebar {
max-width: 48px;
}
#sidebar .nav-link span {
position: absolute;
opacity: 0;
}
}
#media (max-width: 576px) {
#sidebar {
max-width: 0;
overflow-x: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col d-md-flex bg-light h-100 p-0" id="sidebar">
<ul class="nav flex-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-cog"></i>
<span class="badge badge-dark">4</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-chart-line"></i>
<span>Analytics</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-random"></i>
<span>Export</span>
</a>
</li>
</ul>
</div>
<div class="col pt-2">
<div class="row">
<div class="col-12 pt-2" style="background:coral;">
</div>
</div>
<div class="row">
<div class="col-12">
fakdfkaf
</div>
</div>
</div>
</div>
</div>
Note: I strongly recommend against using Bootstrap v4 in a production env today. It's not bug-free cross-browser/cross-device. If you need a production ready, flexible and solid library to compensate for the lack of a frontend dev in your team, v4 is not that library. You should definitely stick with v3 for at least one more year.
v4 currently requires solid CSS knowledge (and a lot of work!) to be used into a prod env.
I am trying to put my "Sanchez Designs......Ms Sanchez....and "Web Developer, Artist and Higher Education" buttons midway into the page, right about at the peak of the mountain. I have researched and tried but am unable to move it. I thought padding-top would do the trick but nope. Any suggestions?
Also, I'm learning web development so please be gentle. Thanks!
body {
background-image: url('images/background3.jpeg');
width: 100%;
height: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: 'Lato', sans-serif;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">Andrea Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_artist.html">Artist</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_highered.html">Higher Education</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="content">
<h1> Sanchez Designs</h1>
<h5> Ms. Sanchez is an aspiring Web Developer</h5>
<hr>
<ul class="list-inline intro-social-buttons">
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_about.html" class="btn btn-dark btn-lg">
<span class="network-name">Web Developer</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_artist.html" class="btn btn-dark btn-lg">
<span class="network-name">Artist</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_highered.html" class="btn btn-dark btn-lg">
<span class="network-name">Higher Education</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
IF you want padding top try
padding-top : 20px!important
if you want div test in center why you try padding top or bottom . you can use a extra div and give style display: flex; align-items: center;
.banner {
height: 80vh;
align-items: center;
vertical-align: middle;
display: flex;
}
like : https://www.w3schools.com/code/tryit.asp?filename=FNBF6UP5MV4S
There are a lot of way to add padding or margin here.
You can add padding-top to your .col-lg-12 if your content and navbar have 2 different container by simply add another class and add padding to it.
HTML
<div class="col-lg-12 text-center padding-content">
<div id="content">
...
CSS
.padding-content {
padding-top: 30px;
}
Demo: https://www.bootply.com/jpU6nmgw8z
Or you can add margin to your navbar
CSS
.navbar {
margin-bottom: 30px;
}
Demo: https://www.bootply.com/k6vGFbX5XC
Did you try adding margin-top to say, the "content" div?
#content {
margin-top: 5%;
}
Codepen link: https://codepen.io/anon/pen/zpRQVL
Command col-xs-whatever doesn't work and makes break lines on mobile view or small screens.
Note: I also tested the class .col- as Bootstrap 4 specifies in the documentation but it still doesn't work.
It doesn't resize properly and pile up, here is the relevant code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchFormContent{
margin: auto;
width: 80%;
}
#navToggler{
float: right;
}
.navbar-toggler{
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<div class="col-12">
<nav class="navbar sticky-top navbar-expand-md">
<div class="col-xs-1 col-md-2">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-xs-10 col-md-7">
<form class="form-inline" id="searchForm" role="search">
<div class="input-group" id="searchFormContent">
<input class="form-control" type="text" placeholder="Busqueda">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<span id="destiny1"></span>
</div>
<div class="col-xs-1 col-md-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
<span id="destiny2"></span>
</div>
</nav>
</div>
</section>
</div>
</body>
I don't know if this is your desired outcome as you did not specify.
I changed col-xs-whatever to col-whatever after that you were applying margin and border on a row with CSS applied to #mainNav that is why all columns could not fit inside.
So I moved row in a wrapping nav and removed row from #mainNav
Here is changed code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchFormContent{
margin: auto;
width: 80%;
}
#navToggler{
float: right;
}
.navbar-toggler{
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<section id="mainNav">
<nav class="navbar sticky-top navbar-expand-md row">
<div class="col-2 col-md-2">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-8 col-md-7">
<form class="form-inline" id="searchForm" role="search">
<div class="input-group" id="searchFormContent">
<input class="form-control" type="text" placeholder="Busqueda">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<span id="destiny1"></span>
</div>
<div class="col-2 col-md-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
<span id="destiny2"></span>
</div>
</nav>
</section>
</div>
as suggested by iamwtk, part of the problem is that you have to use col-XYZ in place of col-xs-XYZ, but the biggest problem is the content of the grid: both Brand and Busqueda exceed the width of the col, breaking the row... try play a little with col distribution and changing the width of "searchFormContent" making it dynamic ;)