I'm just getting started trying to make a new bootstrap site and want to have the search bar as part of a seperate collapse toggle. Essentially on the right of the navbar I want the search bar toggle and then the menu toggle.
I have the following questions:
How can I alight the two buttons so they sit next to each other on the right side? One of them seems to sit in the middle right now and I'm not sure why.
Since I separated the form into a different DIV it seems to not align to the right side of the page anymore, it is indented a bit. Why is that?
I only one of the collapsed menus to be open at a time. E.g. if the search is open and I tap the menu toggle I want it to close the search and vice versa.
This is what I have so far. I know it's near default but I'm just getting started and am quite new to bootstrap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<!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>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</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 class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSearch">
<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">Search</button>
</form>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
1.: Simply add them to a separate node. The container has a flex-settings set, which align the child-nodes to fill 100% width with automatical spacing.
To overcome this, a new child node or different flex-settings are required.
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<div>
<a ...></a>
<a ...></a>
</div>
</div>
I mentioned this behavior some time ago here.
2.: The class .container adds margin to the left and right side and is flex-container, which varies by the break-point. Other classes like .row compensate this and use negative values to rearrange the content.
Bootstrap also offers example which will help you with the alignment in the navbar using ml-auto.
3.: If you want to open only one at a time, you should combine the buttons with the tab-handling. The accordion example might be the right choice. In the end it doesn't matter where you place the buttons or links, as long as the ids match with the content they have to display.
Related
This is a new question, based off this question which was nicely resolved.
Here's the temp site which I'm creating for the client. Here's how this all originated.
That all being said, however, when you scroll to or click on PROJECT, you'll be scrolled to the completed projects section. This is good.
However, when you click or SCROLL to Blog, Roofing or Contact, the targeting is off.
Blog is not active but Roofing is and so on for Roofing and Contact.
So, I don't understand when you scroll past or into or click to Blog, Roofing and Contact, the Active feature is off kilter. #kmoser helped with my previous question and I didn't want to turn it into a discussion so I made a new question. Thank you everyone.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Project</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Roofing</li>
<li class="nav-item">Contact</li>
</ul>
<div class="d-flex align-items-center justify-content-center">
<img src="images/logos/weathertight-logo.png" class="logosmaller" alt="" />
<!-- <span class="flaticon-roof-2"></span> -->
</div>
<div class="col-3 d-flex justify-content-end align-items-center">
<div class="social-media">
<p class="mb-0 d-flex">
<span class="fa fa-facebook"><i class="sr-only">Facebook</i></span>
<span class="fa fa-twitter"><i class="sr-only">Twitter</i></span>
<span class="fa fa-instagram"><i class="sr-only">Instagram</i></span>
<span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span>
</p>
</div>
</div>
</div>
</div>
</nav>
<section id="bloglink" class="ftco-section">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">News & Blog</span>
<h2>Latest news from our blog</h2>
</div>
</div>
</div>
</section>
<section id="roofinglink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-12 heading-section text-center ftco-animate">
<span class="subheading">Roofing</span>
<h2>Roofing that Pays for Itself</h2>
<div class="sec-title text-center wow animated fadeInDown">
<h2>Commercial Roofing that Pays for Itself!</h2>
<p>The heating and AC loss you have been experiencing in your commercial building can be significantly reduced with one of our energy saving roofing systems! WeatherTight Systems’ completely air-tight roofing systems seal in your building’s cool
air and heat. For most of our flat top roofing materials we also apply a seamless, high-solids silicone and acrylic based material as a way of ensuring there will be no water leaks into your commercial building. The result is a roof that is
truly protected from the scorching sun and other destructive weather elements.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contactlink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="wrapper">
<div class="row no-gutters">
Contact link section
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I can't find a way to reduce the width of the input window in the code in the Jumbotron section. I can not see/find any code that controls the width of the input window. The code below is the code from Bootstrap v5. How do I shorten the width of the input window, keeping it centered and its responsiveness?
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Code for jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Code for FontAwesome -->
<link href="Desktop/FontAwesome/fontawesome-free-icons/css/all.css" rel="stylesheet">
<title>Project App Landing Page</title>
<style type="text/css">
.jumbotron{
background-image: url(blueSky.jpg);
min-height: 450px;
text-align: center;
}
#appSummary {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</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 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download The App</a>
</li>
</ul>
<form class="d-flex">
<div class="col-xs-4">
<input class="form-control" type="email" placeholder="Email" aria-label="Email">
<input class="form-control" type="password" placeholder="Password" aria-label="password">
<button class="btn btn-success" type="submit">Log in</button>
</div>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3" >My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
</div>
<div class="container">
<div class="row" id="appSummary">
<h1>Why This App Is Awesome</h1>
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-radiation-alt"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="far fa-heart"></i>Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-pump-medical"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
</body>
</html>
In Bootstrap the form-control class has 100% width. Remove the "form-control" class from this line:
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
Then you should be able to apply your own width to the input, either in the <style> block or with a different Bootstrap class.
I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute
Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.
Below is the code I am using.
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container">
<a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu w_menu ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
How It Works
</a>
</li>
</ul>
</div>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
</div>
</nav>
<div class="row row-eq-height featured_item">
<div class="col-md-5 send-card order-md-last">
<div id="get-started" class="card sticky-top">
<div class="card-body">
<form>
<div class="row">
<div class="col-12 form-group">
<label for="exampleInputEmail1">I'm sending money from...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12 form-group mt-2 mb-0">
<label>I'm sending to...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 mb-3 text-center conversion">
<span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
</div>
<div class="col-12 mt-2 index-form-btn">
<i class="fa fa-rocket"></i> Get Started Now!
</div>
<div class="col-12 text-center">
<p class="small">View Terms & Conditions for more details and fees</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 d-flex order-md-first">
<div class="row">
</div>
</div>
</div>
.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}
The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.
Here's a jsfiddle with the described sticky behaviour.
I want to have the navigation bar I made convert to a dropdown-menu when viewed on a smaller screen (like phones and tablets). The problem is, I didn't use the conventional bootstrap nav bar system, and just made my own. I know that the usual bootstrap solution involves using the nav classes, but I'm not really sure how I'd integrate those into my own code since I didn't use them to begin with. For tablets, I was hoping to have the main menu buttons hide into a dropdown menu with a toggle button, while keeping the logo there. Here is my code:
<header class="main-header" id="Navigation">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
</div>
<div class="col-md-6 text-center">
<div class="row text-center">
<div class="col-md-2 offset-md-1">
<p class="NavBarButtons"> WHY US </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> FIX YOUR BILL </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> HOW IT WORKS </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> LEARN WITH US </p>
</div>
<div class="col-md-2">
<p class="NavBarButtons"> COMMERCIAL </p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3 offset-md-4">
<p class="NavBarButtons"> LOG IN </p>
</div>
<div class="col-md-4 md-offset-3">
<button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
</div>
</div>
</div>
</div>
</div>
</header>
Since I used the grid system, everything collapses pretty well until a certain point, then the entire header completely messes up and stacks, which is why I wanted to try having the menu buttons go into a dropdown menu when that breakpoint is reached. Any help at all is much appreciated. Thanks!
You lose a lot of baked-in functionality when you try to do this outside a .navbar but it's manageable. The .navbar-collapse component itself isn't directly tied to the use of the larger component; you just need to include the <button> and wrapper element for the collapse:
<header class="main-header" id="Navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
</div>
<div class="col-xs-9 text-right">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
</div>
<div class="collapse navbar-collapse text-center" id="menu-collapse">
<div class="col-md-2"><p class="NavBarButtons">WHY US</p></div>
<div class="col-md-2"><p class="NavBarButtons">FIX YOUR BILL</p></div>
<div class="col-md-2"><p class="NavBarButtons">HOW IT WORKS</p></div>
<div class="col-md-2"><p class="NavBarButtons">LEARN WITH US</p></div>
<div class="col-md-2"><p class="NavBarButtons">COMMERCIAL</p></div>
<div class="col-md-1"><p class="NavBarButtons">LOG IN</p></div>
<div class="col-md-1"><button class="SignUp"><b>UNLOCK YOUR POWER</b></button></div>
</div>
</div>
</div>
</div>
</div>
</header>
...
Where you run into problems (and why I would recommend using the whole .navbar structure, is that you need to style the aforementioned button and its various states. You'll also need to address spacing concerns (the dropdown pushes elements down in this fashion).
It's pretty nasty, but.. You could do it with some adjustments to your code so that you'll end up with this:
<nav class="main-header navbar navbar-default" id="Navigation">
<div class="container-fluid">
<div class="col-md-3 navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png" style="width: auto;">
</a>
</div>
<div class="col-md-6 text-center collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="text-center nav navbar-nav">
<li class="col-md-2 offset-md-1">
<p class="NavBarButtons"> WHY US </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> FIX YOUR BILL </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> HOW IT WORKS </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> LEARN WITH US </p>
</li>
<li class="col-md-2">
<p class="NavBarButtons"> COMMERCIAL </p>
</li>
</ul>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3 offset-md-4">
<p class="NavBarButtons"> LOG IN </p>
</div>
<div class="col-md-4 md-offset-3">
<button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
</div>
</div>
</div>
</div>
</nav>
Here's what I did:
give the col-md-3 class navbar-header
In there add
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Add <a class="navbar-brand" href="#"> around your img
the col-md-6 column, add classes collapse navbar-collapse and
id="bs-example-navbar-collapse-1"
The div in that one add classes nav navbar-nav
Make the header a nav element
Give the nav classes navbar navbar-default
Remove the row
The div in the col-md-6 column, remove the row and make it an ul
Turn the divs in there into lis
Basically what you have done now is take the steps necessary to write a bootstrap nav. Take a good look at the example at http://getbootstrap.com/components/#navbar
You'll see that it actually doesn't use the grid system.
Keep in mind you need to include the bootstrap javascript to be able to use toggle functionality.
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Also also, don't put p elements in your navigation. Paragraphs don't make any sense there.