On my page navbar appears vertically instead of horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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>
Home | Bootstrap
</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My bootstrap application</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search" />
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello world!</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
Bootstrap 4
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sample
Why is that? According to the docs it should horizontal by default.
Add navbar-toggleable-md class in nav element to make it looks horizontally in md view :
See this fiddle
Docs :
The original answer applied to Bootstrap 4 alpha. For Bootstrap 4.0+, the navbar-toggleable-* classes have changed to navbar-expand-*. Use one of the navbar-expand-* classes to keep the Navbar horizontal.
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
this code shows my attempt at creating a navigation bar but I can find a way to position everything correctly. I have tried using col-md-3 for several elements but yet I am not able to position them. I was wondering if you would be able to put the search bar in the middle with the links aligned to the right.
What I would like to acheive
The Faulty code is below.
Thank you!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="navbar-nav ">
<li class="nav-item">
Home
</li>
<li class="nav-item">
<form class="mx-auto order-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1">
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link2
</li>
</form>
</li>
</ul>
</body>
</html>
I would recommend reviewing Bootstrap's excellent documentation on their Navbar component as it will better equip you to truly personalize your Bootstrap layout. It wouldn't hurt to also review their utility documentation as several utility classes are well-suited for achieving your layout.
There are several ways you might go about achieving your desired layout, below is how I would approach it while still keeping the built-in Navbar functionality:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pr-lg-5" href="#">Shopping District 1</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="flex-fill my-2 my-lg-0 mx-lg-4">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
</div>
</div>
</form>
<ul class="navbar-nav mr-auto ml-lg-5">
<li class="nav-item">Link</li>
<li class="nav-item">Link2</li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<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>
In the above code sample I've included Bootstrap's class requirements to make your navigational menu collapse on smaller screens, along with the additional components to allow the toggle behavior.
I've also separated the .navbar-brand, form and .navbar-nav items as there is no reason to force them into the same list; Navbar uses Flexbox for its layout so each child element will already align itself accordingly.
For more fine-tuned structure I've declared a couple of margin and padding utility classes (pr-lg-*, mx-lg-* etc) to help create the spacing your illustration suggests you were looking for. By using the -lg- variant these will only apply on larger devices.
So, I was able to modify it to give somewhat of a result similar to what I was looking for!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>NavBar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<ul class="navbar-nav pl-2">
<li class="nav-item">
District 1
</li>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto" width="20"
height="20"></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</form>
</div>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="" class="nav-link">Link</a>
</li>
<li class="nav-item mr-5">
<a id="two" href="" class="nav-link">Link2</a>
</li>
</li>
</ul>
</body>
</html>
I would like my search bar and "Camera search" to be about 75% up from the bottom of the screen, so 25% of the white space when measured from the navbar. I'm having issues vertically aligning it.
I've tried using vertical-align: 25% in my CSS file for the #search-header id, but to no avail.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Camera search."">
<meta name="author" content="author">
<title>Camera App</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'core/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'core/css/custom.css' %}" rel="stylesheet">
<!-- Angolia search CDN and CSS -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img alt="brand" src="{% static 'core/img/logo_with_tagline.png' %}" ></a>
<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>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</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>
</div>
</nav>
<!-- Search section -->
<div id="search-header" class="container-fluid">
<div class="row">
<div class="col-xl-9 text-center mx-auto">
<h3>Camera search</h3>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-xl-5 ais-InstantSearch mx-auto">
<input id="searchbow" name="q" placeholder="Search" autocomplete="off" autocorrect="false" spellcheck="false" class="form-control" type="search" />
</div>
<div id="hits"></div>
</div>
</div>
<section class="hits">
<div class="container">
<div class="row">
<div class="col-xl-9 text-center">
<h1>text</h1>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'core/vendor/jquery/jquery.slim.min.js' %}"></script>
<script src="{% static 'core/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/g/algoliasearch,algoliasearch.helper"></script>
<script src="{% static 'core/js/search.js' %}"></script>
</body>
</html>
/* custom.css */
.navbar-brand > img {
max-height: 40px;
}
#search-header {
vertical-align: 25%;
}
Here's the results as of right now: https://jsfiddle.net/3tf780np/
Here is an image of something similar i'm trying to achieve, except without the big text saying "A list of remote jobs".
U can use margin-top instead of vertical-align on search-header to adjust spacing from the navbar
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