Recently I investigated using Media Queries in CSS to create a mobile-friendly website. I had varying degrees of success with it and in the end decided that it was easy enough to implement, but didn’t always work too great because mobile devices are not getting smaller in physical size but are shipping with higher and higher resolution screens which starts to blur the lines (or maybe even go as far as ‘rub out’ the lines) between traditional ‘desktop resolutions’ and ‘mobile resolutions’.
Bootstrap is an open-source front-end framework that can be used to create fluid websites which scale across a wide range of devices. We’ve heard it all before, but this time it actually seems to work! Bootstrap started out as a project on GitHub and was initially created by a small group of developers who wanted to make a fluid front-end framework to shape the modern web. It was initially launched on August 19th 2011 and is now the world’s most popular HTML, CSS and JavaScript library. It’s also the second-most starred project on GitHub of all time.
Bootstrap makes it easy to create front-ends by taking care of the complicated CSS, JavaScript and jQuery for you, letting you focus on the easy HTML. At the beginning of each Bootstrap HTML page are the following references to pre-defined CSS style sheets, JavaScript files and jQuery files.
<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>
There’s nothing stopping you from downloading these scripts, modifying them and then linking them to the HTML document in the same way you would if you were to design this webpage from scratch. The beauty of Bootstrap is that you can either have these scripts hosted for you, like myself, or you can download them and host them on your own server. It offers flexibility depending on your skillset and your interests.
Let’s get booted!
Before we begin, take a look at my completed example! When I was designing this example I wanted to show a number of Bootstrap features including images, containers, contact forms, footers and carousels. These are all features that make up beautiful modern websites. The site is all about a fictitious ‘superdrug’ I created called ‘Magic Bullets’ – the topic lends itself to a Bootstrap website because it gives an opportunity to show information, pictures and testimonials using various Bootstrap features.
One final thing before we jump into code, let’s see the finished product. The end result is a website that has containers and columns that scale well to different screen resolutions. See the screenshots below.
To begin with, I got a template from W3Schools’ Bootstrap tutorials. I just used the basic three-column fluid template, but by adding and removing elements from the template I was able to make the template into my own.
To make the article easier to follow, I’ll break down each part of the website and explain the code. This is all HTML code with the odd (very, very small) bit of CSS thrown in. I opted to generally stick with the hosted CSS, JavaScript and jQuery scripts to create my website.
The Body
As per the usual, everything is contained in the Body. I set the body style to a fill colour of #f9ffff (a very pale blue, verging on white) using some inline CSS. By default the body area is white.
<body style="background-color:#f9ffff">
The Header Area
Like in ‘ordinary’ HTML, the parts of the website are just divs which have CSS styles applied to them. The Header is just this too. It is just a header with an image in it, see the code below.
<div class="jumbotron text-center"> <h1>Magic Bullets</h1> <p>Take the pain away!</p> <img src="images\bullet_small.png" class="img-circle" width="300" height="279"> </div>
The class ‘jumbotron text-center’ is already defined in the hosted CSS file I’m using for this project, so the class inherits CSS styles from this. The bullet image has the ‘img-circle’ class applied to it which makes it circular (even though the source image is a square). This is a nice really nice feature because you can very easily switch between square and circular images without having to modify the source image at all.
The Carousel
The scrolling images directly beneath my header area are in a container known as a ‘carousel’. The carousel is responsive and works well on touch devices too. It has captions, small circular icons at the bottom to indicate which slide the carousel is on and also left and right buttons to advance the slides. Carousels are very popular in web design right now, both my portfolio website and this website use them. They are a great way of getting across information in a visually-appealing manner and they work across devices.
The code for the carousel is below.
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="images\magic.jpg"> <div class="carousel-caption"> <h3>It's a kind of magic!</h3> <p>It really is. We're not joking.</p> </div> </div> <div class="item"> <img src="images\pain.jpg"> <div class="carousel-caption"> <h3>Feel the pain</h3> <p>Fallen over or got a headache? No worry!</p> </div> </div> <div class="item"> <img src="images\happy.jpg"> <div class="carousel-caption"> <h3>Then feel the gain!</h3> <p>Simply take a Magic Bullet, or two, and watch the pain fade away...</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
You can alter the file location of the images that you want to display in the carousel and edit the captions that you want displayed on the carousel too, all here in HTML.
Images in a carousel are optional – if you prefer you can just have text.
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>
If you added the slider buttons from the code above and then closed the div tag this would display a carousel containing only text. This can be good for showing testimonials or customer thoughts and opinions.
The Navigation Bar
An important aspect of any website is navigation. Bootstrap has a nice built-in navigation bar library that you can call. It has several styling options too, as explained in the reference. I chose to use the ‘inverted’ design which renders a black bar with white text (the default is the opposite). As shown in the earlier screenshots, the navigation bar in this example scales down to mobile devices. There are some Bootstrap menu bars that actually collapse and expand on mobile devices.
<div class="container" style="padding-top:20px"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Magic Bullets</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Science</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Buy!</a></li> <li><a href="#">Testimonials</a></li> </ul> </div> </nav>
I added 20px of padding to the top of the navigation bar class to give some separation between the bar and the bottom of the carousel.
The Container
Again, all of the properties of the container are defined in the hosted CSS, so before you’ve even started it’s all nice and responsive and scales to various resolutions – all you have to do is literally plug the text in! You can add extra divs and rows and columns to add more information to the container, but it’s all still responsive.
<div class="row"> <div class="container-fluid"> <h1>Magic away any problem!</h1> <p>Imagine a world where any medical problem you had could be solved by taking one pill. Sounds like science fiction? Wrong! Thanks to Magic Bullets, you can now take a pill to remedy any medical problem you have!</p> </div> <div class="col-sm-4"> <h3>One pill fits all!</h3> <p>No matter your problem, rest assured we can fix it! The Magic Bullets pills have been designed from the ground-up by doctors and medical engineers to deliver the best recovery!</p> <button type="button" class="btn btn-success btn-lg">One pill fits ALL?</button> <img src="images\pills.png" width="300" height="214" style="padding:20px"> </div> <div class="col-sm-4"> <h3>Learn the science!</h3> <p>Think it's impossible that one pill can remedy any medical problem? Well, you're wrong! Learn the groundbreaking science that reveals that actually medical problems within the human body can be fixed by altering just a few cells!</p> <button type="button" class="btn btn-primary btn-lg">Show me the science!</button> <img src="images\science.png" width="216" height="214" style="padding:20px"> </div> <div class="col-sm-4"> <h3>Seeing is believing!</h3> <p>After reading the science you're still sceptical? Don't be! Seeing is believing! Watch some incredible videos that will blow your mind about the power of our product! Once you've been blown away, come back and order some!</p> <button type="button" class="btn btn-info btn-lg">Be blown away!</button> <img src="images\eye.png" width="216" height="214" style="padding:20px"> </div> <div class="container-fluid" style="padding-top:20px"> <h1>You won't find another pill like it!</h1> <p>Some people say that only three things are guaranteed in this life: birth, death and disappointments. We guarantee you that we will not disappoint and we also hope to help prolong your death! No other product on the market can do what our product does, which is why we're so unique and trusted by so many doctors worldwide.</p> <h2>These real people all have something to say!</h2> <p>...and they only have positive things to say! That's not because we've forced them to say nice things, but actually because they were amazed by the power of Magic Bullets!</p> <p>Take a few moments to read about what they had to say!</p><br>
One interesting thing to focus on are the buttons. Bootstrap gives so many options for buttons and a lot of them are built right into that CSS style sheet, so you can just call them.
<button type="button" class="btn btn-success btn-lg">One pill fits ALL?</button>
The code above is for a button on a Bootstrap website. The ‘btn-success’ class is one built into Bootstrap, it creates a green button. The ‘btn-lg’ class is also built into Bootstrap, it creates a ‘large’ button as shown by the ‘lg’ extension. There are lots of different styles and sizes you can choose from, see the complete list on W3Schools here. The buttons I used are below.
The Media Object
Comment sections like those that you see on WordPress blogs and Tumblr blogs and other websites are what Bootstrap sees as being a ‘media object’. It gives a really nice ‘threaded’ view of a chat in comments complete with avatars and usernames, but again you can play around with the positioning of the messages to alter the view – you could for example place all messages on the right or left-hand side of the page. I placed the Media Object in the same ‘row’ class the containers above.
<!-- Left-aligned media object --> <div class="media"> <div class="media-left"> <img src="images\avatar.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Sometimes I just marvel at the wonders of modern science!</h4> <p>Anything and everything from a simple headache or a cough to feeling numb in my legs, I just take two of these little pills every 4 hours and suddenly I'm better! No need to sleep, drink water or do anything else, literally just take the pills and marvel at the wonders at modern science! How amazing is it that we can cure anything in micrograms of powder?</p> </div> </div> <hr> <!-- Right-aligned media object --> <div class="media"> <div class="media-body"> <h4 class="media-heading">We all thought paracetamol was the 'wonder pill'</h4> <p>Paracetamol is so 2016! It's 2017 now - Magic Bullets are in! We all truly believed that there was nothing paracetamol couldn't cure, but of course we were speaking figuratively. When it comes to Magic Bullets we are actually talking literally. There is literally nothing these can't stop. I've even used these pills to fix broken limbs and they've worked better than casts! Who needs a First Aid when you can have a box of these?</p> </div> <div class="media-right"> <img src="images\avatar.png" class="media-object" style="width:60px"> </div> </div>
The Contact Form
Contact forms are easy to create in Bootstrap. It’s all pre-defined so copy and paste the code below and you’ll get a standard option form, complete with small icons for email, telephone and location! Remember though, Bootstrap is a front-end framework, not a back-end framework, so to make the form work and send an email you’ll need to use a language like PHP or possibly JavaScript to send the contents of the message box to a set address.
<div class="container-fluid bg-grey"> <h2 class="text-center">Questions? Ask us!</h2> <div class="row"> <div class="col-sm-5"> <p>We appreciate that you want to know as much as possible about our product before you try it! Ask us any questions you want and we'll be happy to answer!</p> <p><span class="glyphicon glyphicon-map-marker"></span> Norwich, UK</p> <p><span class="glyphicon glyphicon-phone"></span> 01603 607888</p> <p><span class="glyphicon glyphicon-envelope"></span> faq@magicbullets.com</p> </div> <div class="col-sm-7"> <div class="row"> <div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div> </div> <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br> <div class="row"> <div class="col-sm-12 form-group"> <button class="btn btn-default pull-right" type="submit">Send</button> </div> </div> </div> </div>
The Footer
The final element is a footer. In my case, this is simply a small line of text at the bottom of the page with a button that the user can click to take them back to the top of the page. You can change the colour of the footer area in CSS using some inline CSS like I did to adjust the background colour of the body.
<footer class="container-fluid text-center"> <a href="#myPage" title="To Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <p>Copyright(C) 2017, The Magic Bullet Corporation, Ltd</p> </footer>
Mobile scaling
Unlike Media Queries which has ‘hit and miss’ scaling, Bootstrap seems to scale perfectly to any device regardless of the fact that the resolution of these devices may be the same or similar to desktop resolutions.
Below are some screenshots of the site viewed on an Apple iPad 5th Generation. The screen size is 9.7″ and the screen resolution is 2048×1536.
Below is the site viewed on a Nokia Lumia 930. The screen size is 5″ and the screen resolution is 1080×1920.
Below is the site viewed on an older smartphone – a Nokia Lumia 925 from 2013 which is a 720×1280 4.5″ device. The 930 shown above runs Windows 10 and Microsoft Edge which is the latest browser and mobile operating system from Microsoft, this older 925 runs Windows Phone 8.1 and Mobile Internet Explorer 11 which is previous-generation software. The site is still mostly compatible and certainly displays with few issues, though I did find 720p on a 4.5″ device a little too small to view the site comfortably on, though it did scale OK.
The lowest-end device I tried the site on was the 480×854 Nokia Lumia 625, which is a 4.7″ device. Like the Lumia 925, this device is also running Windows Phone 8.1 and Mobile Internet Explorer 11. I was expecting the site to look worse on this handset than the Lumia 925, especially given that the screen is bigger but lower resolution, however the site scaled quite well to it which was surprising. It’s good to know that Bootstrap allows you to create sites that look good on even low-end phones. Not many people are using phones with resolutions as low as this these days, most people are using handsets with at least 720p displays like the Lumia 925.
So, does Bootstrap get a thumbs up, or do I give it the boot?
The simple answer is I really like it! I’m even considering redesigning some of my client’s websites that I made several years ago using older technologies from the ground-up again using Bootstrap! A lot of the sites I did for clients don’t really focus on mobile design and they don’t work particularly well on a mobile device, so by redesigning them using Bootstrap I am hoping to add a lot more mobile functionality to these older websites I’ve made. I like how Bootstrap is ‘mobile first’ and I love how well it scales. Far better than Media Queries and other responsive design types I’ve tried recently. It’s nice being able to create visually-appealing and technically-capable webpages without touching any JavaScript or jQuery and very little CSS. I like programming but if you want to get something up there quickly that looks nice, or if you’re more interested in focusing on the design, then Bootstrap is perfect. Even if you like coding, there’s nothing stopping you modifying the default scripts and playing around with them to make them into your own.
2 Comments on “Getting the first boot through the door with Bootstrap”