i am trying to have a set of bootstrap cards and i want to have them all share the same size and locate the items in the cards at the same position across all cards, meaning all buttons and text fields to be aligned across each row of cards.
i have created three cards,
in each card i have a button and an input field.
after reading some answer here i found out how to position the buttons on the bottom of the card regardless of how much text there is in the card, so all 3 cards now have the buttons on the same level.
but the same approach is not working for text fields, can you please check the code here and see what is it i am doing wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a
phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto" id="cell1Input">
<input type="button" class="btn mt-auto btn-primary" name="1Button" value="Click Me!"
id="cell1Button"></input>
</br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto" id="cell2Input">
<input type="button" class="btn mt-auto btn-primary" name="2Button" value="Click me!"
id="cell2Button">
</br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial
letters in each word</p>
<input type="text" name="3Input" class="mt-auto" id="cell3Input">
<input type="button" class="btn mt-auto btn-primary" name="3Button" value="Click me!"
id="cell3Button">
</br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24"
height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<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>
</body>
</html>
https://jsfiddle.net/eliasRob/v7c0f9d2/6/
Since you've already set card-body to d-flex and flex-column, the only thing you need to do is to set justify-content: space-between; and wrap/group everything you want to position at the bottom with a <div>/<section>, etc.
<div class="card-body d-flex flex-column justify-content-between">
<p class="card-text">...</p>
<div>
<input type="text" class="form-control" />
<button type="button" class="btn btn-primary">Click Me!</button>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/Lu269nd8/
Remove mt-auto from the Click me button. Keep mt-auto only on the text field. Basically once you add mt-auto to an element(input field in this case), all the elements below it also get bottom aligned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto" id="cell1Input">
<input type="button" class="btn btn-primary" name="1Button" value="Click Me!" id="cell1Button" />
<br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto" id="cell2Input">
<input type="button" class="btn btn-primary" name="2Button" value="Click me!" id="cell2Button">
<br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial letters in each word</p>
<input type="text" name="3Input" class="mt-auto" id="cell3Input">
<input type="button" class="btn btn-primary" name="3Button" value="Click me!" id="cell3Button">
<br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<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>
</body>
</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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
<style type="text/css">
.inputButtontopAlign{
position: absolute;
bottom: 82px;
width: 86%;
-webkit-appearance: textfield;
}
</style>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto inputButtontopAlign" id="cell1Input">
<input type="button" class="btn mt-auto btn-primary" name="1Button" value="Click Me!" id="cell1Button"></input>
</br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto inputButtontopAlign" id="cell2Input">
<input type="button" class="btn mt-auto btn-primary" name="2Button" value="Click me!" id="cell2Button">
</br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial letters in each word</p>
<input type="text" name="3Input" class="mt-auto inputButtontopAlign" id="cell3Input">
<input type="button" class="btn mt-auto btn-primary" name="3Button" value="Click me!" id="cell3Button">
</br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<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>
</body>
</html>
enter image description here
Use the footer, it already has everything setup for you.
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Title goes here</h4>
<p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
</div>
<div class="card-footer text-muted mx-auto">
<button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
</div>
</div>
Then you can optionally style the card-footer element.
.card-footer {
background: transparent;
border-top: 0px;
}
demo: https://jsfiddle.net/rustynox/203zwyq6/
Related
I am using Bootstrap 5, trying to make responsive card ads. left card. For some reason, the sticky-top won't work.
I'm trying to create a sticky sidebar on the left. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work.
Here is my code:Here is my code; I am not aware of any possible collisions with sticky-top.
<!Docktype html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<title>Selda</title>
</head>
<body class="bg-light d-flex flex-column min-vh-100" data-new-gr-c-s-check-loaded="8.904.0" data-gr-ext-installed="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Selda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learning</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About-US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact-US</a>
</li>
</ul>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js "></script>
</body>
</html>
The menu div is the one I'd like to stick to the top as the user scrolls down.
It looks like the issue is that the sticky-top class is not being applied to the correct element. In your code, it is being applied to the navbar element, but it should be applied to the sidebar column that you want to make sticky.
Try adding the sticky-top class to the col-lg-4 element that contains the sidebar menu, like this:
<div class="col-lg-4 mb-3 sticky-top">
Also make sure that the parent element of that sidebar column has a position property set to relative, so that the sticky element can be positioned relatively to it.
<div class="row" style="position:relative">
You may also add a top property to the sticky element for better positioning.
<div class="col-lg-4 mb-3 sticky-top" style="top:50px">
This should make the sidebar menu sticky on the left as you scroll down the page.
The problem is that elements only stick to their parent element, so the menu stays within the column. You should separate your page to two large columns: one for all the other rows/columns and the other for your sidebar that will stay sticked to the top. Try this (although you may have to change some padding/margins due to nested rows):
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="row">
<div class="col-12"></div>
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
</div>
So my navbar is going to have the search field before the menu items. These are both seperate collabible DIVs so I can have a toggle for each.
The problem at the moment is that there is a large gap between the search bar and the menu items when on desktop view. There seems to be a min-width attribute on it but I'm not sure why or how to get around it.
Can anyone advice how to remove the gap and align both to the left?
<!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">
<title>Bootstrap - Prebuilt Layout</title>
<link href="/css/style.css" rel="stylesheet">
<script src="js/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container" id="accordion">
<a class="navbar-brand" href="#">Demo</a>
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSearch" data-pa aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-search"></i>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSearch" data-parent="#accordion">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="collapse navbar-collapse" id="navbarContent" data-parent="#accordion">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container">
<div class="row text-center">
<div class="col-lg-6 offset-lg-3">Click outside the blue container to select this <strong>row</strong>. Columns are always contained within a row. <strong>Rows are indicated by a dashed grey line and rounded corners</strong>. </div>
</div>
<br>
<hr>
<br>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<br><br>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
<br>
<br/>
<div class="card">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some text to build on the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
Card link
Another link
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class=" col-md-4"> Click here to select this<strong> column.</strong> Always place your content within a column. Columns are indicated by a dashed blue line. </div>
<div class="col-md-4 "> You can <strong>resize a column</strong> using the handle on the right. Drag it to increase or reduce the number of columns.</div>
<div class="col-md-4 "> You can <strong>offset a column</strong> using the handle on the left. Drag it to increase or reduce the offset. </div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Buttons</strong></h3>
<p>Quickly add buttons to your page by using the button component in the insert panel. </p>
<button type="button" class="btn btn-info btn-md">Info Button</button>
<button type="button" class="btn btn-success btn-md">Success Button</button>
</div>
</div>
</div>
<div class="text-center col-md-6">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Badges</strong></h3>
<p>Using the insert panel, add badge to your page by using the badge component.</p>
<span class="badge badge-info">Info Badge</span> <span class="badge badge-danger">Danger Badge</span>
</div>
</div>
</div>
</div>
<br>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p>Copyright © 2020 · All Rights Reserved · <a href="#" >My Website</a></p>
</div>
</div>
</div>
</body>
</html>
Set your own style.css lower than the bootstrap one in the heading of your html, and then edit it there. HTML reads from top to bottom, so any changes made to elements in your styles.css are losing priority to bootstrap.
<script src="js/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Your css sheet -->
<link href="/css/style.css" rel="stylesheet">
I want to create cards in a row with dropdown. But when one card collapses, height of all other card changes corresponding the first one. How can I prevent that? I want to expand only the selected card. Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mr-0 ml-0">
<div class="card" style="width: 18rem;">
<div class="card-header">
1
</div>
<div class="card-body">
<h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample1">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<div class="card-header">
2
</div>
<div class="card-body">
<h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample2">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
</div>
You can add this class align-items-start to <div class="row mr-0 ml-0">. This will prevent the height of all cards from expansion when expanding one.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-start mr-0 ml-0">
<div class="card" style="width: 18rem;">
<div class="card-header">
1
</div>
<div class="card-body">
<h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample1">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<div class="card-header">
2
</div>
<div class="card-body">
<h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample2">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
</div>
in my current project I have a navbar with a burger menu. It scales correctly to md-breakpoint, but after this breakpoint all the elements go to the left and the toggle works weird.
On medium:
view on medium
On laptop L - 1440px:
view on larger than medium
This is the code that I have for my header header right now, but I can't seem to figure out what makes my navbar act so weird, since I'm not specifying anything different between md and >md.
<header>
<div class="container ">
<nav class="navbar bg-light navbar-light fixed-top ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
Does anyone know what the problem is?
UPDATED
Besides of moving the class .fixed-top to your container, you have to use .container-fluid if you want a full width header. Plus, you have to remove the container wrapping the narvbar-collapse. Otherwise ii'll react to breackpoint aswell.
<header class="container-fluid fixed-top">
<nav class="navbar navbar-light">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</nav>
</header>
#Periplo this is what it looks like after replacing the fixed-top class from the navbar to the parent container.
After added fixed-top to container instead of navbar
Not quite what I'm looking for because I would like a full-width navbar :). Here's my html code:
<!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, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Products</title>
</head>
<header>
<div class="container fixed-top">
<nav class="navbar bg-light navbar-light ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<picture>
<img class="img-fluid headerImg mt-5 mb-5" src="images/jungle.jpg">
</picture>
<div class="container">
<div class="row">
<div class="col d-flex mb-3 align-items-center">
<h1 class="m-0 ml-5" style="flex-grow: 1;">Products</h1>
<button class="navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
</div>
<div class="container">
<div class="row m-0">
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
</div>
<div class="mx-3 mb-5">
<a href="ourstory.html">
<button type="submit" class="btn btn-primary col-sm-12 col-md-6 d-flex align-items-center justify-content-center mx-auto">Read our story<i class="button fa fa-angle-double-right ml-2"></i></button>
</a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</main>
<footer>
<div class="container">
<ul class="list-unstyled">
<div class="row flex-md-row">
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="#">Terms & Conditions</a></li>
<li><a class="mx-3" href="#">Privacy Policy</a></li>
<li><a class="mx-3" href="#">Return Policy</a></li>
</div>
<div class="d-sm-block d-md-none" style="height: 10px; background-color: white; width: 100px; visibility: hidden;"></div>
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="contact.html">Contact Us</a></li>
<li><a class="mx-3" href="faq.html">FAQ</a></li>
</div>
</div>
</ul>
<a href="https://www.instagram.com/biancalooijen/">
<div class="icons mx-3 float-right">
<img src="images/instagram.svg" alt="instagramIcon">
</div>
</a>
<a href="https://m.facebook.com/bianca.looijen">
<div class="icons float-right">
<img src="images/facebook.svg" alt="facebookIcon">
</div>
</a>
</div>
</footer>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to make it so that when I scroll down a page, my navbar is fixed at the top, I have tried so many different things and I'm not sure what I am doing wrong. Please see my code below for the nav.
.navbar {
padding: .8rem;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
.navbar {
padding: .8rem;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div style="height: 5000px; background-color: red; width: 500px;"></div>
The navbar can have the class .sticky-top added to it in order to easily fix it to the top of the page. Support for this is widespread, with the exclusion of Internet Explorer. As an alternative, fixed-top can be used, but this may cause some overlapping issues if not supplemented by additional CSS.
A solid red div element has been included in order to make the page large enough to scroll through.
I have now developed the following issue, here is my full HTML.
When i scroll i seem to be losing the toolbar when it reaches a certain point in the document?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Unique Portraits</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="50">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Image SLider & Indicators -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" id="home">
<div class="carousel-item active">
<img src="img/warm.jpg" >
</div>
<div class="carousel-item">
<img src="img/landscape2.jpg">
</div>
<div class="carousel-item">
<img src="img/river.jpeg">
</div>
</div>
<div class="carousel-caption">
<h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
<h3>My Journey Through Nature...</h3>
<div class="showcase-buttons">
<!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
<button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button>
</div>
</div>
<!-- Arrows -->
<a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next btn-lg" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-12 text-center">
<p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
<button type="button" class="btn btn-outline-secondary btn-lg text-center">Find out more</button>
</div>
</div>
</div>
<!-- Gallery -->
<div class="container gallery" id="gallery">
<div class="row">
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
</div>
<div class="row">
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
</div>
</div>
<!-- About -->
<div class="container-fluid about" id="aboutme">
<div class=row padding>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-9 col-xl-9 text-light text-center ">
<h2 class="display-3 mt-4">A bit about me</h2>
<p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has</p>
<button type="button" class="btn btn-outline-primary btn-lg m-1 mb-4">Why not get in touch?</button>
<br>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 aboutimg">
<img src="img/landscapeold.jpeg">
</div>
</div>
</div>
<!-- Connect -->
<div class="container-fluid">
<div class="row jumbotron text-center m-0">
<div class="col-12">
<h2 class="display-3">Connect</h1>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container-fluid padding text-center" id="contact">
<div class="row text-light pt-4">
<div class="col-6 addresscol">
<hr class="light">
<div>
<p><i class="fa fa-envelope mr-3 mt-3 icon offset-4"></i>email#emaildomain.com </p>
<p><i class="fa fa-phone mr-3 icon offset-4"></i>+12 34567 891</p>
<p><i class="fa fa-map-marker mr-4 icon offset-4"></i>123 Same Street</p>
<div>
<p><i class="offset-4 mr-5"></i>County</p>
<p><i class="offset-4 mr-5"></i>Town</p>
<p class="pml"><i class="offset-4 mr-5 mb-1"></i>Postcode</p>
</div>
</div>
<button type="button" class="btn btn-outline-light btn-lg mt-4 offset-">Download Résumé</button>
</div>
<!-- Start of Form -->
<div class="col-6">
<h2 class="pb-3 align-centre display-4"><i class="fas fa-envelope mr-2"></i>
Drop a Line
</h2>
<div>
<h4 class="display-5 formpadding">
Dont hesitate to get in touch
</h4>
</div>
<div data-form-type="form">
<div class="row">
<div class="col-md-6 formpadding">
<input type="text" class="form-control input formfirst" name="name" data-form-field="Name" placeholder="Your Name">
</div>
<div class="col-md-6 formpadding">
<input type="text" class="form-control input formphone" name="phone" data-form-field="Phone" placeholder="Phone">
</div>
<div class="col-md-12 formpadding" data-for="email">
<input type="text" class="form-control input" name="email" data-form-field="Email" placeholder="Email">
</div>
<div class="col-md-12 formpadding" data-for="message">
<textarea class="form-control input" name="message" rows="3" data-form-field="Message" placeholder="Message"></textarea>
</div>
<div class="input-group-btn col-md-12" style="margin-top: 10px;">
<button href="" type="submit" class="btn btn-primary btn-form">SEND MESSAGE</button>
</div>
</div>
</form>
</div>
</div>
<!-- End of Form -->
</div>
</div>
</div>
<!-- Copyright -->
<div class="container-fluid copyright">
<hr class="bg-light">
<p class="lead">© domainname.com</p>
</div>
</footer>
<!-- JavaScript's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>