Sample Bootstrap 4 template for a search orientated two row navbar

John Avis by | January 16, 2019 | Bootstrap

This sample lends itself to an ecommerce website.
Sample Bootstrap 4 template for a search orientate

This sample lends itself to an ecommerce website.


*Search is always visible, even on small screens
*Product categories are visible on larger screens but need a click to view on small screens
*Shopping cart link is always visible
*Phone number is always visible
*On small screens just a small logo is visible, but on larger screens the website name is also visible

This template uses standard Bootstrap classes wheere possible, but requires a little extra CSS to achieve the end result.


Source code:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="" />
<title>Hello, world!</title>
<style type="text/css">
#header .row{margin-right:-5px;margin-left:-5px}
#header .col,#header .col-auto{padding-right:5px;padding-left:5px}

#header_cart a{font-size:1.5rem;text-decoration:none}
#header_cart a .badge{color:#fff}
#header_bottom a{display:block;line-height:36px}
#header_bottom a:hover{text-decoration:none}
#header .collapsing{position:initial;height:initial;overflow:initial;transition:initial}
@media screen and (prefers-reduced-motion:reduce) {
#header .collapsing{transition:initial}
@media (min-width: 576px) {
#header .row{margin-right:-15px;margin-left:-15px}
#header .col,#header .col-auto{padding-right:15px;padding-left:15px}

@media (min-width: 992px) {
#header_nav a{display:inline-block;margin-right:20px}

<div id="header" class="bg-light border-bottom">
<div class="container">
<div id="header_top" class="row align-items-center">
<div class="col-auto">
<a href="#">
<img id="header_logo_left" alt="" src="" style="height:36px;width:36px;" />
<img id="header_logo_right" alt="" src="" style="height:36px;width:231px;" />
<div id="header_search" class="col">
<form action="/search" method="get" role="search">
<label for="keywords" class="sr-only">search</label>
<div class="input-group">
<input id="keywords" name="keywords" type="text" class="form-control" placeholder="search">
<span class="input-group-append">
<button type="submit" class="btn btn-dark"><span class="oi oi-magnifying-glass" aria-hidden="true"></span></button>
<div id="header_cart" class="col-auto">
<a href="#" class="text-danger"><span class="oi oi-cart" aria-hidden="true"></span> <span id="header_cart_qty">99</span></a>
<nav id="header_bottom" class="clearfix">
<a id="header_menu_toggler" class="float-left text-dark" data-toggle="collapse" href="#header_nav">menu <span class="oi oi-chevron-bottom" aria-hidden="true"></span></a>
<a href="tel:0000000000" class="float-right text-dark"><span class="icon-phone"></span> (000) 000-0000</a>
<div id="header_nav" class="collapse">
<a href="#" class="text-dark">Menu option A</a>
<a href="#" class="text-dark">Menu option B</a>
<a href="#" class="text-dark">Menu option C</a>
<a href="#" class="text-dark">Menu option D</a>
<a href="#" class="text-dark">Menu option E</a>
<div class="container">
<h1>Hello, world!</h1>
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Related Posts

ASP.NET Web Forms Bootstrap

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

by John Avis | April 9, 2019

In this, my third post on this topic, I go over the methods I am using now and the problems I have encountered and overcome.


Free Bootstrap 4 Template with Side Navigation

by John Avis | December 20, 2018

I recently needed a simple Bootstrap 4 template with side-navigation so came up with the following template.


Bootstrap 4 white buttons and input groups with button addons

by John Avis | June 29, 2018

Bootstrap 4.x doesn't give you white buttons by default, but sometimes white buttons look better, particularly for something like a search box using an input group with button addon placed on a navbar.


There are no comments yet. Be the first to leave a comment!

Leave a Comment


About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.


Get the latest posts delivered to your inbox.