Bootstrap example

What is a bootstrap example How do you make a bootstrap example? This script and codes were developed by Ivan Sakoman on 16 August 2021, Monday.

How do I make an bootstrap example?
  1. Bootstrap example Previews
  2. Bootstrap example HTML Codes
  3. Bootstrap example CSS Codes
Bootstrap example Previews

Bootstrap example HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Bootstrap example</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <div class="row">
    <div class="col-md-4">
      <h1>SiteName</h1>
    </div>
    <ul class="col-md-8 list-inline text-right top-margin">
      <li>
        <a href=""><span class="glyphicon glyphicon-envelope vcenter"></span> Newslaters</a>
      </li>
      <li>
        <a href=""><span class="glyphicon glyphicon-leaf vcenter"></span> RRS</a>        
      </li>
      <li>
        |
      </li>
      <li>
        <form class="form-inline" role="form">
          <div class="form-group">
            <label class="sr-only">Email Address</label>
            <input type="email" class="form-control" />
            <button type="button" class="btn btn-default">Sign up!</button>            
          </div>
        </form>
      </li>
    </ul>
  </div>
  <nav class="row">
    <div class="col-sm-12"></div>
    <ul class="nav nav-tabs custom-navbar">
      <li class="active"><a href="">Books</a></li>
      <li><a href="">Magazines</a></li>
      <li><a href="">Comics</a></li>
      <li><a href="">Audio Books</a></li>
      <li><a href="">Action Figures</a></li>
      <li><a href="">Costumes</a></li>
    </ul>
  </nav>
  <div class="row padding-top">
    <div class="col-sm-5 col-main">
      <h4 class="small-dark-title">label</h4>
      <div class="lead">today <span class="text-muted">| 01.02.2016.</span></div>
      <h2>Lorem ipsum et dolor</h2>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      <div class="row">
        <div class="col-sm-4"><span class="glyphicon glyphicon-time vcenter"></span> | 3 days ago</div>
        <div class="col-sm-8">
          <span class="glyphicon glyphicon-tags vcenter"></span> Tags:
          <a href="">lorem</a>,
          <a href="">lorem</a>,
          <a href="">lorem</a>
        </div>
      </div>
      <hr />
      <div class="small-dark-title">a la une</div>
      <a href="">&nbsp; Questo de mous</a>
      <span class="text-muted">| peile 14.14.2014.</span>
    </div>
    <div class="col-sm-4 col-secondary"><h4 class="small-dark-title">label</h4></div>
    <div class="col-sm-3 col-tertiary"><h4 class="small-dark-title">label</h4></div>
  </div>
</div>
  
  
</body>
</html>

Bootstrap example CSS Codes

@charset "UTF-8";
.top-margin {
  margin-top: 22px;
}

.padding-top {
  padding-top: 10px;
}

.custom-navbar {
  background-color: #eee;
  /*top, left/right, bottom*/
  padding: 20px 10px 0;
  border-radius: 5px 5px 0 0;
}

.small-dark-title {
  background-color: black;
  color: white;
  padding: 6px 12px;
  /*kako bi se width smanjio na širinu contenta*/
  display: inline-block;
}

.vcenter {
  display: inline-block;
  vertical-align: text-top;
  float: none;
}

a:hover {
  text-decoration: none;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.