Please could somebody explain why my Bootstrap doesn't apply? - html

I am trying to build my first webpage with Bootstrap, but the Bootstrap code I have added appears to be half responsive (e.g. the navbar seems to know it's been provided some kind of Bootstrap class, but other classes such as navbar-dark do nothing). I have also had to remove the bullet points from my ul myself even though the tutorial I'm following hasn't.
I feel as though my issue is how Bootstrap is linked to my HTML file, but remain stumped.
Thank you in advance. Here is my code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="./recources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>


You're using an old version of Bootstrap.
change the version to 4.4 to make this work


For bootstrap 3.4.1 you need to use
https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
For bootstrap 4 you need to use
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css
You write on bootstrap 4 syntax but link to bootstrap 3
For bootstrap 5 (latest beta) you need to use
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css
Check documentation page


To apply bootstrap whichever version you want to apply please pick correct css file from any online CDN libraries. e.g.
https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
<!DOCTYPE html>
<html lang="en">
<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.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</main>
</body>
</html>


In question the classes which you have used relates to latest version of bootstrap. You should use the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>White Rose Crew Company Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ourWork">OUR WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#theCrew">THE CREW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">CONTACT US</a>
</li>
</ul>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body>
</html>

Related

how to set navigation bar to the left using bootstrap?

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>

How to align right in BootStrap 5.0 for the components?

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>

Bootstrap image is not being static when zoomed in

Guys i am early stage in development of website. I made this image in photoshop and applied a logo in website with navbar for a test. I am not getting results right because when i zoom in image is blurry and it is being so big I want it to be same size even when i zoom in. Please Help
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Website</title>
</head>
<body>
<div class="text-center justify-content-center">
<img src="Untitled-1.png" class="img-fluid">
</div>
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">CERTIFICATES</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">ABOUT ME</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">CONTACT</a>
</li>
</ul>
</nav>
</body>
<style>
.nav-link
{
color: black;
}
.navbar-nav > li
{
padding-left:30px;
padding-right:30px;
}
.nav-link:hover
{
color: wheat;
}
</style>
</html>
I want logo to be of the same size when I zoom in but the logo is getting bigger when I zoom in as you can see in above picture.

Can't figure out how to make my collapsible navbar button not always visible (Bootstrap v.3)

I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.

Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.

Why is this bootstrap nav bar not showing correctly?

Why wont this work? I am sure i have set it up correctly although this is my first time using bootstrap. I am trying to use CDN distribution but I cant seem to get it to work. It currently just displays them as links as oppose to the nav bar that can be seen when used on other sites.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Fictional Football Club</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<ul>
<li>News</li>
<li>Matches</li>
<li>Table</li>
<li>Squad</li>
<li>Tickets</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>

The navbar structure is not Bootstrap 4. Read the Bootstrap 4 navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-light bg-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">News</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Squad</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Tickets</a>
</li>
</ul>
</nav>