Skip to content

Instantly share code, notes, and snippets.

@eubanksanator

eubanksanator/gist:84d87687f21dfc26f87d

Created January 19, 2015 13:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save eubanksanator/84d87687f21dfc26f87d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save eubanksanator/84d87687f21dfc26f87d to your computer and use it in GitHub Desktop.
Download ZIP
Trying to get my list group colored!
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-Practice</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/boootstrap.js"></script>
<!-- CUSTOM STYLESHEET -->
<style type="text/css">
.navbar {
margin-bottom: 0px;
}
/* .wrx-colors {
margin-top: -60px;
}*/
/*.last_row {
margin-top: 50px;
}*/
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- JUMBOTRON -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<!-- ROW 1 -->
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-6">
<h2>Another Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- ROW 2 -->
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRklyIYjPZCSEDU-izNAXUlGqtaRZ7EDJZoUkGfOrKKCyB4T0QY" alt="White WRX">
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRklyIYjPZCSEDU-izNAXUlGqtaRZ7EDJZoUkGfOrKKCyB4T0QY" alt="White WRX">
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRklyIYjPZCSEDU-izNAXUlGqtaRZ7EDJZoUkGfOrKKCyB4T0QY" alt="White WRX">
</a>
</div>
<div class="col-md-3">
<h2>WRX Colors</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="badge">14</span>
White WRX
</a>
<a href="#" class="list-group-item list-group-item-danger">
<span class="badge">11</span>
Red WRX
</a>
<a href="#" class="list-group-item">
<span class="badge">7</span>
Silver WRX
</a>
<a href="#" class="list-group-item list-group-item-success">
<span class="badge">44</span>
Blue WRX
</a>
</div>
</div><!--ROW 2 close-->
</div><!-- CONTAINER CLOSE-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment