"for use page"
Bootstrap 3.3.0 Snippet by riosande

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"> <title>Portfolio</title> </head> <body> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Portfolio</a> </div> <div class="collapse navbar-collapse" id="my-navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="./">Home</a></li> <li><a href="blog/">Blog</a></li> <li><a href="projects/">Projects</a></li> <li><a href="contact/">Contact</a></li> </ul> </div> </div> </div> <div class="container"> <h1 class="title">Welcome to my Portfolio</h1> </div> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> <div class="col-xs-6 col-md-4"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> <div class="col-xs-6 col-md-4"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> <div class="col-xs-6 col-md-4"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> <div class="col-xs-6"> <div class="box"> <img src="images/meeting.jpg" alt="hdsgfhdfghdfghdfghdf" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> <img src="images/meeting.jpg" alt="Img" height="130" width="197"> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>

Related: See More

Vue Argon Design System
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: