what I want is in large device screen there should be one card in a row and same for mobile devices that are in small screen.
my bootstrap nav bar is working perfectly on the mobile device and large screen but with my cards, there is one issue, it's not shrinking to fit in small screen devices. I have to scroll to view the whole card.
here is my code for cards
<% include partials/header %>
<div class="row text-center" id="post-center">
<% posts.forEach(function(post){ %>
<div class="col-md-12 col-sm-12 col-xs-12" >
<div class="card" style="width: 25rem;">
<div class="card-body">
<p class="card-title float-left"><%= post.username %></p>
</div>
<img class="card-img-top" src="<%= post.image %>" alt="Card image cap">
<div class="card-body">
<p class="card-text"><%=post.description%></p>
</div>
</div>
<br>
</div>
<% }); %>
</div>
</div>
<% include partials/footer %>
and here is my header file code where I have my nav bar
<!DOCTYPE html>
<html>
<head>
<title>9tech</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<!-- Bootstrap Css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="/stylesheet/custom.css">
<!-- Font Awesome cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar static-top navbar-expand-lg navbar-light bg-primary">
<a class="navbar-brand" href="/" style="color:white;">9tech</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link " href="/posts" style="color:white;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" style="color:white;">About</a>
</li>
<li class="nav-item">
<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-light my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
<ul class="nav navbar-right">
<li class="nav-item">
Sign Up </i>
</li>
<li class="nav-item">
<i class="fa fa-user" aria-hidden="true"></i> Log In
</li>
</ul>
</div>
</nav>
I don't know where I am doing wrong
and here is my custom css file
ul li a {
color:white;
padding:5px;
}
html,body {
margin: 0;
padding: 0;
height:100%;
background-color: #E7ECF2;
}
#post-center{
display: table;
margin: 0 auto;
}
pls help.
Try to add width: 100% to the image.
Related
Good day, everyone. Please I'm a newbie in CSS and HTML, and this is literally my first project.
So, I'm trying to build a navigation menu, and I'm trying to move two items("SIGN IN" and "CART") to the right, away from the other items on the navbar. But I can't seem to get them to move. navbar-right doesn't work. I've tried housing them inside a container and giving them a relative position, but then the navbar menu is not responsive when I decrease the size of the screen. Also, for some unknown reason, the glyphicon shopping cart item refuses to be displayed.
in my main.css, this is my code-
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Ecommerce</title>
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<link rel="stylesheet"
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'store/styles.css' %}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light md-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Jumaz</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="#"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<div id="formAndButton">
<form id="search" method="get" class="d-flex" action="#">
<input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
<button class="btn btn-warning text-light" type="submit">SEARCH</button>
</form>
</div>
<!--i intend moving the following items to the right and make them responsive when screen is shrunk-->
<div class="navbar" id="moveRight">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
SIGN IN
</li>
<li class="nav-item">
<!-- glyphicon shopping cart item does not load -->
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>CART
</li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
{% block body %}
{% endblock body %}
</body>
</html>
in my styles.css, i have -
#input{
width: 500px;
border: 1px solid #555;
display: block;
padding: 9px 4px 9px 40px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}
#formAndButton{
margin-left: 100px;
}
/*i tried relative positioning of the items like this, but it isn't responsive when screen is shrunk*/
#moveRight{
position:relative; left:200px;
}
li { margin-left: 15px }
In my styles.css, I also tried-
#moveRight{
display: flex;
justify-content: flex-end;}
and also tried,
#moveRight{
grid-column-start: 5; }
<ul class="navbar-nav ms-auto"> should not be nested inside <ul class="navbar-nav me-auto mb-2 mb-lg-0">. They should be next to each other.
<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="#"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<div id="formAndButton">
<form id="search" method="get" class="d-flex" action="#">
<input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
<button class="btn btn-warning text-light" type="submit">SEARCH</button>
</form>
</div>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
SIGN IN
</li>
<li class="nav-item">
<i class="fa fa-fw fa-shopping-cart"></i>CART
</li>
</ul>
</div>
For the icon use the font-awesome shopping cart icon <i class="fa fa-fw fa-shopping-cart"></i>.
I am trying to build a responsive website with bootstrap 4 that shows the sidebar links as a button toggle. My current implementation, when reduce to mobile screen dimensions, shows the sidebar links at the top of the page. Appreciate any help in converting them to a toggle.
Below is my html code:
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="https://themes.getbootstrap.com/wp-content/themes/bootstrap-marketplace/style.css?ver=1590611604">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body class="page-template-default page page-id-49440 woocommerce theme-dokan woocommerce-js dokan-theme-dokan">
<main id="main" class="site-main main">
<section class="section">
<div class="container">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav123" aria-controls="nav123" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="section pt-10 mt-md-10">
<div id="the-guide" class="container-fluid">
<div class="row justify-content-between pb-0 pb-lg-2" >
<!--<div class="col-md-3 col-xl-2 d-none d-lg-block" id="inside">-->
<div class="col-md-2 col-xl-3" id="inside">
<ul id="nav123" class=" nav flex-column ">
<li class="nav-item nav-item-heading">
Theme 1
</li>
<li class="{{ 'active' if active_page == 'page1' else '' }}" >
Page 1
</li>
<li class="{{ 'active' if active_page == 'page2' else '' }}" >
Page 2
</li>
</ul>
</div>
<div class="col-lg-9 mb-4 mb-lg-0 order-lg-2">
<h2> this is a test</h2>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</main>
<style>
.pagelink{
color: hotpink;
}
.active {
font-weight: bold;
<!--background-color: lightgray;-->
}
</style>
</body>
</html>
An example implementation where a navbar was converted to a button navbar toggle is below:
<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>Net Ninja Pro - the Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
section{
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
<div class="container-xxl">
<!-- navbar brand / title -->
<a class="navbar-brand" href="#intro">
<span class="text-secondary fw-bold">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" 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>
<!-- navbar links -->
<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="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row g-4 justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
Buy Now
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
So, this is a simples question. Why, even thougth i have a div that overtakes the length of window, i cant scroll down the page to see the rest of what that div contains? Never happened to me, tried to search some things but i cant find. I put all code because i dont know if its something of <meta name ....
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title>ITW 2021/22 - Driver Details</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<link href ="../Content/bootstrap-reboot.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<style>
.styles {
height: 400px;
width: 500px;
background-repeat: no-repeat;
background-size: cover;
}
#index {
background-size: cover;
background-image: url("https://images5.alphacoders.com/317/thumb-1920-317664.jpg");
background-position: top;
position: fixed;
height: 100%;
width: 100%;
z-index: -1;
}
</style>
</head>
<body id="index">
<nav class="navbar navbar-expand-lg navbar-light bg-opacity-10 fixed-top py-3" style="position:relative">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">
<img style="height:50px; width:65px;" src="img/f1-abu-dhabi-gp-2017-f1-logo-6614911-removebg-preview.png" />
</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">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="home.html" style="color:white"><b>Home</b></a></li>
<li class="nav-item"><a class="nav-link" href="Circuits.html" style="color: white"><b>Circuits</b></a></li>
<li class="nav-item"><a class="nav-link" href="Drivers.html" style="color: white"><b>Drivers</b></a></li>
<li class="nav-item"><a class="nav-link" href="Timeline.html" style="color: white"><b>Champions</b></a></li>
</ul>
<div class="dropdown">
<a style="color: white" class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="FAQs.html">FAQ's</a></li>
<li><a class="dropdown-item" href="AboutUs.html">About us</a></li>
</ul>
</div>
</div>
</div>
</nav>
<br />
<div class="row" style="margin:auto">
<div class="container d-flex flex-row" style="margin:auto; min-width:50px; max-width: 600px">
<div class="py-3 container"><input class="form-control" Id="SearchText" placeholder="Search circuit" /></div>
<div class="py-3 container"><button type="button" id="clickCir" class="btn btn-secondary">Search</button></div>
</div>
<div class="d-none text-danger col-form-label container" id="NomeError">
<center><i class="fa fa-exclamation-triangle"></i><b>É necessário selecionar um circuito</b></center>
</div>
</div>
<div class="container" style="margin:auto; background-color:white; max-width:900px; min-height:900px; border-radius:10px;">
<div class="container" id="infoId" style="margin:auto; justify-content:center"> </div>
</div>
<script src="Scripts/bootstrap.min.js"></script>
<script src="../Scripts/knockout-3.5.1.js"></script>
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/jquery-ui-1.13.0.js"></script>
<script src="Circuit.js"></script>
Inside of your #index { } delete position: fixed; to be able to scroll.
Bootstrap Jumbotrons go out of the container on my website which means the navbar on the mobile version does not fill the screen. Other pages where I don't have a jumbotron this problem does not occur.
I tried using a Card instead, but that has some problems when I put it anything other than text
<div class="row">
<div class="jumbotron col-lg-8 col-md-12"
style='margin-left: 15px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px;'>
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
and for the navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Images of the problem
https://drive.google.com/file/d/0ByAYcnq6pPDmNlJsUUNBbkM1aFRITEQ5TUF4U0JxWXpOYVBV/view?usp=sharing
https://drive.google.com/file/d/0ByAYcnq6pPDmcnVsbTNMbkI2MnlNdmZocmtXV0FWbXpmUTdN/view?usp=sharing
* {
margin: 0;
padding: 0;
}
.banner {
background: #e9ecef;
}
#media only screen and (max-width: 767px) {
.display-3 {
font-size: 2rem !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="banner">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.
</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.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>
</body>
</html>
I have reduced font-size for small devices, it was getting out of the container. Also use .container > .row > .col-lg-12 [just for example] before using the main class. For reference go through https://getbootstrap.com/docs/4.1/layout/grid/ this link. Hope it'll solve your problem
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