Bootstrap Amazon Style Search Bar

Trying to achieve search bar look from Amazon.com

try this

select {  background: transparent;  border: none;  padding: 6px 12px;}button {  padding: 6px 12px;  background: transparent;  border: none;}.input-group-addon {  padding: 0!important;}

<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="row">  <div class="col-md-2"></div>  <div class="col-md-8">    <div class="input-group">      <span class="input-group-addon">      <select>        <option>1</option>        <option>2</option>        <option>3</option>        <option>4</option>    </select>  </span>
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
      <span class="input-group-addon"> <button>Submit</button></span>    </div>  </div>  <div class="col-md-2"></div></div>

Adding a search bar into main menu on Bootstrap

Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.

Ratings bar popover?(Like the one in Amazon)

I found the solution to my own problem. The issue was that I added my custom popover content to the template options instead it should have been added to the content options of bootstrap popover.

$(document).ready(function(){    $("#myPopover").popover({        content : '<div style="width:220px"><div class="small-space text-center"><span>4.1 out of 5 stars</span></div><table class="small-space"id="histogramTable"><tr><td class="rating-number"><span><a title="55% of reviews have 5 stars">5 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="55% of reviews have 5 stars"><div class="histo-meter"aria-label="55%"><div class="histo-meter-filled"style="width:55%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">55%</span><tr><td class="rating-number"><span><a title="21% of reviews have 4 stars">4 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="21% of reviews have 4 stars"><div class="histo-meter"aria-label="21%"><div class="histo-meter-filled"style="width:21%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">21%</span><tr><td class="rating-number"><span><a title="10% of reviews have 3 stars">3 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="10% of reviews have 3 stars"><div class="histo-meter"aria-label="10%"><div class="histo-meter-filled"style="width:10%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">10%</span><tr><td class="rating-number"><span><a title="8% of reviews have 2 stars">2 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="8% of reviews have 2 stars"><div class="histo-meter"aria-label="8%"><div class="histo-meter-filled"style="width:8%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">8%</span><tr><td class="rating-number"><span><a title="6% of reviews have 1 stars">1 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="6% of reviews have 1 stars"><div class="histo-meter"aria-label="6%"><div class="histo-meter-filled"style="width:6%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">6%</span></table></div>',        html: true    }); });

.small-space{  margin-bottom: 10px;}
.rating-number{  padding: 1px 3px;}
.letter-space{    display: inline-block;    width: .385em;}
.histoBar{  width: 60%;}
.histo-meter{    border-radius: 1px;    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);    overflow: hidden;    background: #f2f2f2;    background: -webkit-linear-gradient(top,#eee,#f6f6f6);    background: linear-gradient(to bottom,#eee,#f6f6f6);    background-color: #f3f3f3;    height: 17px}
.histo-meter-filled{    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05);    border-radius: 1px;    background: #ffba00;    background: -webkit-linear-gradient(top,#ffce00,#ffa700);    background: linear-gradient(to bottom,#ffce00,#ffa700);    background-color: #ffce00;    transition: width .5s ease;    float: left;    font-size: 0;    height: 100%;}

<!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>Example of Placing HTML inside Bootstrap 3 Popovers</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script type="text/javascript">
</script><style type="text/css"> </style></head><body><div class="bs-example">    <button type="button" class="btn btn-primary btn-lg" id="myPopover" data-toggle="popover">HTML Inside Popover</button>    </div></body></html>  

---

Related Topics