Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <nav class="navbar navbar-default yamm categories">
        <div class="container">
            <div class="row main-top-bar">
                <div class="vertical-center  col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <h1 class="shop-name"><a href="#">Nazwa sklepu</a></h1>
                </div>
                <div class="search-box vertical-center col-lg-4 col-md-4 col-sm-10 col-xs-10">
                    <button type="button" data-target="#navbar" data-toggle="collapse" class="navbar-toggle pull-left">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="">
                        <form action="">
                            <div class="input-group">
                                <input type="text" class="form-control search-input" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default search"> <span class="glyphicon glyphicon-search"></span> </button>
                                    <button type="button" class="btn btn-default clear-search "><span class="glyphicon glyphicon-remove"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="shopping-cart vertical-center col-lg-4 col-md-4 col-sm-2 col-xs-2">
                        <button class="btn btn-default go-to-cart" type="button"> 
                    <icon class="glyphicon glyphicon-shopping-cart"></icon>
                    ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

/**{
    border:1px dashed red;
}*/
/* SLIM TOP BAR*/
ul.lang-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.lang-selector li {
  float: left;
}
.slim-top-bar ul.lang-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.slim-top-bar ul.lang-selector li {
  float: left;
}
.slim-top-bar a {
  display: block;
  text-align: center;
  padding: 5px 10px;
}
/* ---------------- MAIN TOP BAR----------------------*/
.main-top-bar {
  /*padding: 10px 0 10px 0;*/
}
.main-top-bar .vertical-center {
  display: inline-block;
  float: none;
  vertical-align: middle;
}
.main-top-bar .shop-name {
  margin: 0;
  padding: 0;
}
.main-top-bar .search-input {
  width: 100%;
}
.affix {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  background-color: #ede7e7;
  margin: 0;
}
.affix button.go-to-cart {
  width: 100%;
}
.affix .shop-name {
  float: right;
}
@media (min-width: 992px) {
  .affix ul.categories {
    display: none;
  }
}
@media (max-width: 992px) {
  .affix .shop-name {
    display: none;
  }
  nav.navbar {
    min-height: 0;
  }
  .shopping-cart {
    padding: 0;
    padding-right: 10px;
  }
}
.navbar-toggle {
  border-color: #ddd;
  margin-top: 0;
  margin-right: 10px;
}
.navbar-toggle .icon-bar {
  background-color: #888;
}
/*------------------CATEGORIES NAVBAR----------------------*/
ul.categories h3 {
  font-size: medium;
  margin-top: 0;
}
ul.subcategories {
  list-style-type: none;
  margin: 5px 10px 5px 10px;
  padding: 0;
}
/*-----------------------SPECIAL OFFERS----------------------------*/
/*Special offers*/
.super-offers-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.super-offer-item {
  text-align: center;
  padding: 10px 10px 10px 10px;
}
.super-offer-item h3 {
 ...

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */