# What Will I Learn?
- You will learn about bootstrap
- You will learn how to use bootstrap (HTML & CSS) to design a web page
- You will learn how to layout a form in bootstrap
- You will learn how to use bootstrap for offline development
Requirements
- You must have basic HTML knowledge
- You must have basic CSS Knowledge
- You need Text Editor, browser and internet to download resources
Difficulty
- Basic
Tutorial Contents
Bootstrap is the most popular framework used in developing websites with HTML, CSS, and JavaScript. It’s a framework used by web designers and developers to quickly layout the frontend of their websites or web applications.
STEPS
- Visit http://getbootstrap.com to download the latest version or you can add the CDN version too if you want.
Click the download button to download bootstrap files.
- Next, visit https://jquery.com/download/ to download the latest Jquery because we need it for bootstrap to work.
Download the compressed production jQuery.
- Move the downloaded bootstrap and jQuery to your development folder and unzip it. You should have something like this. Then, copy and paste your jQuery-3.3.1.min.js into the JS folder for better organization and simplicity. I renamed mine to “jQuery.min.js”.
- Open your text editor and create a new file named “index.html” and save it in the root folder. It should look like this.
- Create another CSS file named “custom.css” and save it in the CSS folder.
- Open the “index.html” file in your text editor and declare your standard HTML opening elements as seen below.
The two files linked at line 11 and 12 is the bootstrap CSS framework and a custom CSS file for our custom styling. You must add/link the bootstrap file on line 12 for the framework to work.
- Next, is to add/link the JavaScript files. The files should be at the bottom of the page before the tag to enable fast loading of the page. You must add the JQuery file first before the bootstrap JS if not it would not work.
- Add the following piece of code to your index.html file. The code should be placed within the Body tag of the page.
The piece of code starts from the tag. It creates a collapsible navbar with a dark color that it’s mobile-friendly. The bootstrap tags work like magic and ease your work because it comes with automatic styling. Visit https://getbootstrap.com/docs/4.0/getting-started/introduction/ for a well-documented explanation on how to use the framework.
- Add the following code immediately after the navbar for the main body of the web page. The piece of codes will layout a bootstrap form inside a container. It’s a registration form, yours can be anything.
The codes above starting from will produce a registration from within a container inside the main body of the page.
- Open your “custom.css” file and add the following piece of code.
The custom styling is to center the content of web page and add colors. You can experiment with the colors you want.
Final Result
Preview in your browser to see the result we have.
The final landing page will look like this. You can change the colors, the form inputs among other things and make it yours.
The full source code of the index.html file is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Utopian-io Landing Page with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Utopian-io</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Tutorials</a>
<a class="dropdown-item" href="#">Blog post</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Copy Writing</a>
</div>
</li>
</ul>
<a class="btn btn-success my-2 my-sm-0" href="#"> + Contribution</a>
</div>
</div>
</nav>
<main role="main" class="container">
<h1>Registration Form</h1>
<p class="lead">Register and contribute to open source</p>
<div class="container registration-form">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputCity">First Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="First Name">
</div>
<div class="form-group col-md-4">
<label for="inputCity">Last Name</label>
<input type="text" class="form-control" id="inputLname" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputState">How did you hear about us?</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-success col-md-8">Create account</button>
</div>
</div>
</form>
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The full source code of the custom.csss file is:
body {
padding-top: 5rem;
}
.registration-form {
padding: 3rem 1.5rem;
background-color: #3E4551;
}
.form-group label {
color: #fff;
}
Curriculum
This is my first contribution on utopian-io platform. I will do more with time.
Posted on Utopian.io - Rewarding Open Source Contributors