Skip to content

Instantly share code, notes, and snippets.

@roshanadhikari2073

roshanadhikari2073/index.html

Created August 6, 2016 10:38
Show Gist options
  • Save roshanadhikari2073/bc47537b4b070fc716d146c19dea3556 to your computer and use it in GitHub Desktop.
Save roshanadhikari2073/bc47537b4b070fc716d146c19dea3556 to your computer and use it in GitHub Desktop.
Download ZIP
New way to use Bootstrap and its components
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/master.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default">
<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" aria-expanded="false">
<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="#">Techrise</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 navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class = "container-fluid">
<div class="jumbotron">
<h1>Techrise</h1>
<p>Learn how to code with Techrise</p>
<p>Learn HTML, CSS, JavaScript, Ruby, and Ruby on Rails</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div class = "row">
<div class = "col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">CSS</h3>
</div>
<div class="panel-body">
Its one of the meb desging methods. You know coding is cool. Google or YouTube to learn more on this, this way will be more cool.
</div>
</div>
</div>
<div class = "col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">JAVA</h3>
</div>
<div class="panel-body">
Its one of the meb desging methods. You know coding is cool. Google or YouTube to learn more on this, this way will be more cool.
</div>
</div>
</div>
<div class = "col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">PHP</h3>
</div>
<div class="panel-body">
Its one of the meb desging methods. You know coding is cool. Google or YouTube to learn more on this, this way will be more cool.
</div>
</div>
</div>
<div class="page-header">
<h1>Learn Coding from Roshan <small>Welcome to TechRise. For today Roshan will be mentor</small></h1>
</div>
<div class="well well=lg">
Hey!!!I am Roshan Adhikari and for today I will be teaching you how to use footer in the bootstrap. Firstly go to the Google and search for Bootstrap Footer and click on the first link you see. Dont worry everyone have same link when they search this item and in the page rightclick and go to inspect elements. Go to footer and copy the elemtents and paste it on closing div.
</div>
<footer class="footer">
<div class="container">
<div class = "row">
<div class = "col-md-3">
<h4>About</h4>
<ul>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
</ul>
</div>
<div class = "col-md-3">
<h4>Contact</h4>
<ul>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
</ul>
</div>
<div class = "col-md-3">
<h4>Join Us</h4>
<ul>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
</ul>
</div>
<div class = "col-md-3">
<h4>Contribute</h4>
<ul>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
<li style = "list-style-type:none;"><a href = "#">Link</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
Raw
master.css
footer{
background-color: grey;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment