Sunday, July 3, 2016

Implementing Bootstrap Using the CDN Tutorial

Bootstrap is a responsive framework for web development using HTML, CSS and Javascript that allows you to create a responsive and beautiful web page in minutes.

So here is a tutorial to help you start with bootstrap. Visit for the complete documentation and references in this tutorial.

Or simple watch the video embedded from for reference.

STEP 1: Construct your html5 basic anatomy. Copy the code below in your text editor and save it with an html file extension.

<!DOCTYPE html>
<title>Bootstrap CDN</title>



STEP 2: Copy the CDN from under the Getting Started Menu. Copy the bootstrap CDN that looks like on the image below.

or copy the code below.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

And you're done! Next thing to do is to put your contents inside the body tag. The code below is from the under the CSS -> Forms menu. You can explore the documentation for more components in bootstrap 3.

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  <div class="checkbox">
      <input type="checkbox"> Check me out
  <button type="submit" class="btn btn-default">Submit</button>

Hope this helps! Good luck! ^_^

Implementing Bootstrap Using the CDN

No comments:

Post a Comment