Make Your Site Mobile Responsive with Bootstrap
Nowadays, owning a smartphone is the norm and they have become communication essentials in our day to day lives. This means more and more people are using mobile devices to view web sites. This has lead to the evolution of website development to cater to visitors viewing the site on mobile browsers. Thus, mobile responsive web design has become the standard for sites today. Coding responsive may be tricky but tools like Bootstrap can definitely help.
Bootstrap is a popular framework used by developers to create responsive, mobile first web sites. It’s completely free to download and you can get the latest version (v3.3.5) on the Bootstrap Official Website.
Bootstrap frees you from the burden of writing a large amount of CSS code and it also saves you time spent on designing the web pages.
How to Install Bootstrap
If you’re new at creating Bootstrap Templates, the first thing you need to do is access the “getting started” page on the Bootstrap website. Select from the three different download options depending on your level as a developer.
For Bootstrap beginners, I think it’s probably best if you stick with the basic Bootstrap download. It contains compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
Bootstrap Download
Once you’ve downloaded the ZIP from Bootstrap, extract the files to reveal the structure of Bootstrap and you should see something like this:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
Basic Template
Below is an example of a basic HTML template. All you have to do is open your favorite text editor (ex. Notepad++, Sublime Text, etc.) and copy/paste the following HTML code so you can start working on your responsive website.
<!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> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Save the file as “index.html” in the same folder where you unzipped Bootstrap. Open the index.html in your favorite web browser and you should see “Hello, world!” styled with the Helvetica Neue font which is specified in the code above.
And there you have it! The beginning to coding responsive websites is as simple as that. Now, you can start making your own website responsive. Just remember to always point your CSS and JS to the right folders and you’re good to go. For more information and if you’d like a live guide in customizing Bootstrap, check it out here.
