Skip to content

Instantly share code, notes, and snippets.

@shiggan

shiggan/index.html

Created March 8, 2017 07:39
Show Gist options
  • Save shiggan/2e64f1f27bf4e2a7d69fe624bf638fed to your computer and use it in GitHub Desktop.
Save shiggan/2e64f1f27bf4e2a7d69fe624bf638fed to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/satuci
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.bd-example-container-fluid {
max-width: none;
}
.bd-example-container {
margin-right: auto;
margin-left: auto;
}
.bd-example-container-header {
height: 3rem;
margin-bottom: .5rem;
background-color: #daeeff;
border-radius: .25rem;
}
.bd-example-container-sidebar {
float: right;
width: 4rem;
height: 8rem;
background-color: #fae3c4;
}
.bd-example-container-body {
height: 8rem;
margin-right: 4.5rem;
background-color: #957bbe;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">stemuh</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">q</span>
<input type="text" class="form-control" placeholder="search" aria-describedby="basic-addon1">
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav style="background-color: #daeeff;">
</nav>
<main class="col-md-10 offset-md-2 pt-3" style="background-color: #957bbe;">
<h1>hi</h1>
</main>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.bd-example-container-fluid {
max-width: none;
}
.bd-example-container {
margin-right: auto;
margin-left: auto;
}
.bd-example-container-header {
height: 3rem;
margin-bottom: .5rem;
background-color: #daeeff;
border-radius: .25rem;
}
.bd-example-container-sidebar {
float: right;
width: 4rem;
height: 8rem;
background-color: #fae3c4;
}
.bd-example-container-body {
height: 8rem;
margin-right: 4.5rem;
background-color: #957bbe;
}</script>
</body>
</html>
Raw
jsbin.satuci.css
.bd-example-container-fluid {
max-width: none;
}
.bd-example-container {
margin-right: auto;
margin-left: auto;
}
.bd-example-container-header {
height: 3rem;
margin-bottom: .5rem;
background-color: #daeeff;
border-radius: .25rem;
}
.bd-example-container-sidebar {
float: right;
width: 4rem;
height: 8rem;
background-color: #fae3c4;
}
.bd-example-container-body {
height: 8rem;
margin-right: 4.5rem;
background-color: #957bbe;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment