Sample Bootstrap 4 template for a search orientated two row navbar

John Avis by | January 16, 2019 | Bootstrap Web Development

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

What's new in Bootstrap v5

by John Avis | December 22, 2020

There are many changes in Bootstrap v5, but these are some of the stand-out changes I noticed when updating a website to v5.

How to use the new Bootstrap Icons v1.2 web font

by John Avis | December 12, 2020

With the release of Bootstrap Icons v1.2, there is now an easy-to-use web font. Here's how you can use the new web font in your web pages.

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by John Avis | May 6, 2020

If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.


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

Leave a Comment



...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.


Get the latest posts delivered to your inbox.