Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
assignment12_bootstrapGrids/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
executable file
138 lines (127 sloc)
8.93 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Bootstrap 101 Template</title> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" | |
crossorigin="anonymous"> | |
<style type="text/css" media="screen"> | |
body > .container { | |
margin-top: 2em; | |
} | |
.nav-wrapper { | |
background-color: var(--dark); | |
} | |
</style> | |
</head> | |
<body> | |
<div class="nav-wrapper"> | |
<div class="container"> | |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" | |
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<ul class="navbar-nav mr-auto"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Link</a> | |
</li> | |
<li class="nav-item dropdown"> | |
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" | |
aria-haspopup="true" aria-expanded="false"> | |
Dropdown | |
</a> | |
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
<a class="dropdown-item" href="#">Action</a> | |
<a class="dropdown-item" href="#">Another action</a> | |
<div class="dropdown-divider"></div> | |
<a class="dropdown-item" href="#">Something else here</a> | |
</div> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link disabled" href="#">Disabled</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12 col-sm-9 order-1 order-sm-2"> <!-- ------------- Edit here ------------- --> | |
<div class="jumbotron"> | |
<h1 class="display-4">Hello, world!</h1> | |
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to | |
featured content or information.</p> | |
<hr class="my-4"> | |
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> | |
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> | |
</div> | |
<div class="row"> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-6 col-lg-4"> <!-- ------------- Edit here ------------- --> | |
<h2>Heading</h2> | |
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
</div><!--/row--> | |
</div> | |
<div class="col-12 col-sm-3 order-2 order-sm-1" id="sidebar"> <!-- ------------- Edit here ------------- --> | |
<div class="list-group"> | |
<a href="#" class="list-group-item list-group-item-action active">Navigation</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
<a href="#" class="list-group-item list-group-item-action">Link</a> | |
</div> | |
</div> | |
</div><!--/row--> | |
<hr> | |
<footer> | |
<p>© Company 2018</p> | |
</footer> | |
</div><!--/.container--> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" | |
crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" | |
crossorigin="anonymous"></script> | |
</body> | |
</html> |