Here is the code for reference, and a link to the codepen.
<!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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Parallax Website</title>
</head>
<body>
<!--Navbar-->
<div class="container-fluid">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="#"><i class="fas fa-user-circle"></i>Business Website Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navi">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
Everything seems to be working well but for some reason when the screen is decreased in size, the "hamburger" is not displaying any list items when clicked.
Additionally, there's a really annoying small white margin at the bottom that I can't seem to get rid of no matter how many margin:0s I place. Ugh.
Use the correct version of Bootstrap 4 JavaScript (not 3.x). The Codepen is using Bootstrap JS 3.x so the Navbar toggler won't work.
To remove the margin on the footer, remove the bottom margin (mb-0) from the paragraph (<p>)...
<footer>
<div class="container-fluid footer">
<p class="feetText mb-0">
Copyright 2018 © Payton Jewell
</p>
</div>
</footer>
https://www.codeply.com/go/xipKGoGnkU
Related
I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.
body{
background: rgb(27, 25, 25);
}
.btn{
border-radius: 3em;
}
<!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">
<title>Adam Farrow </title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-xxl">
<a href="#" class="navbar-brand">
<span class="fw-bold text-secondary">
Adam Farrow
</span>
</a>
<button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link " href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
As you can see if you run the code, it will have the items slightly unaligned.
I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.
use padding-bottom or padding-top : 2px to position your github link
my scrollspy isn't working properly. It starts at home and can scroll down but when scrolling back up all tabs highlight except the "home" tab when you scroll all the way up. Additionally I've tried to include the data-bs-offset= "100" in my body tag but that has no effect on the scrolling. The tab changes to the next too early so I wanted to fix this with data-bs-offset. I'm pretty sure i've included the necessary cdn links for the css and js from the bootstrap website. Any suggestions?
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/8caef0b63d.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Tatyana Chalik</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true">
<!-- navbar -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-lg-3 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="resume.html">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
<header id="home">
<h1> hi </h1>
</header>
<main>
<div class="container" id="about">
<h2 class="pt-5 pb-4 text-center">About Me</h2>
<p class="pt-5 text-center"> jsdklajsdfljsdalkfjsdljflsdjflsdfljdf </p>
</div>
<div class="container" id="projects">
<h2>hi2</h2>
</div>
<div class="container contacts" id="contact">
<h2 class="text-center pt-5 pb-3">Contact Me</h2>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
Hello I found some similarity case with your case. And I try to help you with send the link below. You can read and choose the one which the case is close to your case. Thank you, hope it can help you. bootstrap offset scrollspy not working or How do I set the offset for ScrollSpy in Bootstrap? or this one data-offset in Bootstrap Scrollspy is not offseting at all
I am trying to create a navigation bar for my website using bootstrap 5. The problem is I want to make my bar move to the left by using the class margin left auto (ml-auto). I do not know exactly why it did not work for me. Could you help me to figure out the reason, please? Thank you so much!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kim Phan</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <!-- make the nav bar size, nav bar font color, navbar background color-->
<a class="navbar-brand" href="">tindog</a> <!--brand color logo-->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href=""> Contact</a>
</li>
<li class="nav-item">
<a class="nav-link"href=""> Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link"href=""> Download</a>
</li>
</ul>
</nav>
</body>
My current navigation bar image
You can no longer set margins with ml.auto or mr.auto in Bootstrap v5. They are replaced by ms.auto and me.auto.
"ms" and "me" stand for "margin start" and "margin end."
[Auto margins from Bootstrap v5.1 documentation]
https://getbootstrap.com/docs/5.1/utilities/flex/#auto-margins
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">tindog</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</nav>
you are using your brand name inside the navbar class that's why the brand name is aligned in the left of navbar.
instead of that you can give your brand name in separete div element. After that your ml-auto attribute will work.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kim Phan</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div>
<a class="navbar-brand" href="">tindog</a> <!--brand color logo-->
</div>
<div class="navbar-nav ml-auto">
Conanct
Pricing
Download
</div>
</body>
I am actually trying to do this online course and in that the instructor uses Bootstrap 4, but I decided I could do BootStrap 5.1.
I am trying to make my navigator bar elements like the ordered list on the right, but I checked the documentation and everything, I can't seem to figure why it's not working.
So my current navigation bar is something like:
So I can't seem to get it there, I used these different variations:
<ul class="navbar-nav justify-content-end">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<ul class="navbar-nav ml-auto>
Also, Could someone help me understand what does me? mb? ml stand for?
And how do I get this to right side in BootStrap 5.0
<!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.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Priyanka Giri</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Name ABC</a>
<ul class="navbar-nav ml-auto ml-2">
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
</ul>
</div>
</body>
</html>
UPDATE: ms-auto WORKED But what does this mean exactly? What did the above three mean?
.me is the renamed classname of .mr, which stands for
margin-right property
.mb is the classname which stands for margin-bottom property
.ml is the classname which stands for margin-left property
Since Bootstrap 5 .ml has been renamed to .ms, and .mr has been renamed to .me.
More on that in the documentation of migrating to v5: https://getbootstrap.com/docs/5.0/utilities/spacing/
Speaking of your code, the .ml-auto class sets your nav-items on the left. It simply sets the margin-left: auto; CSS. This may not work in the newer Bootstrap. Try renamed the version with .ms-auto, so your code will look like:
<!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.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Priyanka Giri</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Name ABC</a>
<ul class="navbar-nav ms-auto ms-2">
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
</ul>
</div>
</body>
</html>
Not a native English speaker so prepare for typos.
I was wondering why my nav and sidebar are being shown twice on my html page when i look at it in a browser.
So you'd know what I'm talking 'bout here's a screenshot:
Right now my main page looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schadedossier #yield('title')</title>
<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="https://soshandyman.blob.core.windows.net/themes/bs4-insurance.css">
</head>
<body>
<!--wrapper(the thing around the sidebar and the nav)-->
<div class="d-flex" id="wrapper">
<!--sidebar-->
<div class="bg-light border-right collapse" id="sidebar-wrapper">
<div class="sidebar-heading">logo</div>
<div class="list-group list-group-flush">
Tussenpersoon
Woning
Schadedossier
Data schadedossier
Verzekeringsnemer
<button class="btn btn-outline-secondary">Contract raadplegen</button>
</div>
</div>
<div class="container-fluid p-0">
<!--page content-->
<div id="page-content-wrapper">
<nav class="navbar navbar-light bg-light border-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar" id="navbarSupportedContent">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" id="aangifte-tab" data-toggle="tab" href="#aangifte" aria-controls="aangifte">Aangifte</a>
</li>
<li class="nav-item">
<a class="nav-link" id="details-tab" data-toggle="tab" href="#details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="overzicht-tab" data-toggle="tab" href="#overzicht">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evaluatie-tab" data-toggle="tab" href="#evaluatie">Evaluatie</a>
</li>
</ul>
</div>
</nav>
<!--start tab content (here starts the nav aangifte and so on)-->
<div id="myTabContent" class="tab-content">
#yield('content', View::make('childAangifte'))
</div>
<!--end page content-->
</div>
<!--endsidebar-->
</div>
<!--endwrapper-->
<!--incert bootstrapscripts here-->
</body>
Then this is my child's code:
#extends('welcome')
#section('title')
aangifte
#endsection
<!--incert html-->
#endsection
Anyway I'm having trouble with this because this is not the only child i need to display but if this will form an issue every time then I rather want to know before I try to get the other ones to work.
Also what option would be better to use switch or if to go to the other children?
Thanks a bunch and sorry for the terrible formatting.