A bootstrap Layout

In this example below you will see how to do a A bootstrap Layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -Infamous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Infamous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A bootstrap Layout</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <header class="navbar-fixed-top">
  <nav class="navbar navbar-inverse main-navigation" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="triangle-contain">
          <a class="navbar-brand top-logo" href="#">
            Bootstrap
          </a>
        </div>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="text-right" href="#">Home</a></li>
          <li><a class="text-right" href="#">About</a></li>
          <li><a class="text-right" href="#">Contact</a></li>
          <li><a class="text-right special-nav" href="#">Sign Up</a></li>
          <li><a class="text-right special-nav" href="#">Get The App</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<div class="continer data-display">
  
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 landing-content">
      <div class="col-xs-4 sign-in">
   
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 about-content">
      <div class="col-xs-3 about-content__box"></div>
      <div class="col-xs-3 about-content__box"></div>
      <div class="col-xs-3 about-content__box"></div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 footer-content">
      
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Infamous/a-bootstrap-layout-xroddy */
body {
  padding-top: 50px;
  margin: 0;
}

.special-nav {
  background-color: #FFF333;
  margin-left: 10px;
}

.data-display {
  height: 50px;
  border: 1px solid #CCCCCC;
}

/*NAVIGATION CONTENT*/

.main-navigation {
  background-color: #CCCCCC;
  border: none;
  border-radius: 0px;
}

/*LANDING CONTENT*/

.landing-content {
  height: 100vh;
  margin-bottom: -50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.sign-in {
  height: 100%;
  margin-right: 5%;
  background-color: #CCCCCC;
}

/*ABOUT CONTENT*/

.about-content {
  height: 100vh;
  background-color: #CCCCCC;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-content__box {
  height: 50%;
  background-color: #FFFFFF;
  margin-left: 5px;
  margin-right: 5px;
}

/*FOOTER CONTENT*/

.footer-content {
  height: 200px;
  background-color: #0066FF;
}

/*Downloaded from https://www.codeseek.co/-Infamous/a-bootstrap-layout-xroddy */
new Vue({
  el: '',
  data: {
    
  }
});

Comments