[Bootstrap] 5. Button and well
Element Identification
There are a number of classes in Bootstrap that help add prominence to a page by adding a background color and a rounded border like the below example.
Styling for this element is due to what Bootstrap class?
-
container -
well -
btn -
lead
Choose a Well
Which of the following is NOT a Bootstrap class we could use to style well padding?
-
well -
well-sm -
well-md -
well-lg
Button Element
It's a best practice to use a tags for all buttons, including Bootstrap's buttons, because browsers expect them to be clicked.
-
true
-
false
Button Color
Bootstrap has some very striking button colors that can be used by adding an additional class to any button. We really want the following button to stand out without conveying contextual information and have it styled appropriately.
The button class used to add color in this case is: btn-primary
Check out the following button element. It's a destructive action, and we've given it a class to indicate that clicking on it will perform a potentially negative action. What Bootstrap class is being used to set its color?
The button class used to add this color is: btn-danger
Comparing Transport Systems
Like any main sales page, our site needs a good way for travelers to compare the features and prices between the different transport systems. The HTML for this was added, but the Bootstrap classes to make it look nice still need to be included. Follow the tasks to have the Transporter, Space Elevator, and RocketBus sections stand out.
<!DOCTYPE html> <html> <head> <title>Blasting Off With Bootstrap</title> <link href='css/bootstrap.min.css' rel='stylesheet'> <link href='css/main.css' rel='stylesheet'> </head> <body> <div class='container'> <div class='row'> <div class='col-md-12'> <h1>Blasting Off With Bootstrap</h1> </div> </div> <div class='row well well-lg'> <div class='col-md-6'> <h2>The Fastest Way to Space</h2> <p class='lead'>Make your way to space in the comfort of your own rocket, elevator or transporter.</p> <button type='button' class='btn btn-lg btn-default'>Take the Tour</button> <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button> </div> <div class='col-md-6 visible-md visible-lg'> <img src='images/img-header.jpg' alt='Blast off with Bootstrap' /> </div> </div> <div class='row text-center features'> <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'> <i class='glyphicon glyphicon-briefcase'></i> <h3>Book Today!</h3> <p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p> </div> <div class='col-sm-4 col-xs-6'> <i class='glyphicon glyphicon-random'></i> <h3>Go Anywhere</h3> <p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p> </div> <div class='col-sm-4 col-xs-6'> <i class='glyphicon glyphicon-send'></i> <h3>RocketBus®</h3> <p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.</p> </div> </div> </div> <div class='quote'> <div class='container'> <blockquote> <p>Any sufficiently advanced technology is indistinguishable from magic.</p> <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer> </blockquote> </div> </div> <div class='container transport-systems'> <div class='row'> <div class='col-md-10 col-md-offset-1'> <h2>Our Transport Systems</h2> <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p> </div> </div> <div class='row'> <div class='transporter col-md-3 col-md-offset-1'> <h3>Transporter</h3> <ul> <li>8 second travel time</li> <li>Chance of death only 1 in 7,593</li> <li>Low price of only $15.99!</li> </ul> <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p> </div> <div class='space-elevator col-md-3 col-md-offset-1'> <h3>Space Elevator</h3> <ul> <li>8 hour scenic ride</li> <li>Only 1 horrific death per 12,456</li> <li>Only $45.99 if you book today!</li> </ul> <p><button><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p> </div> <div class='rocketbus col-md-3 col-md-offset-1'> <h3>RocketBus</h3> <ul> <li>8 minute scenic ride</li> <li>Plunging death rate of under 1/100k</li> <li>$74.99 lets you blast off today!</li> </ul> <p><button><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p> </div> </div> </div> <div class='footer'> <div class='container'> <div class='row'> <div class='col-md-3 col-sm-4 col-xs-6'> <h4>Who We Are</h4> <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p> <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p> </div> <div class='col-md-offset-1 col-sm-2 col-xs-6'> <h4>Links</h4> <ul class='list-unstyled'> <li><a href='/'>Home</a></li> <li><a href='tickets.html'>Tickets</a></li> <li><a href='stations.html'>Stations</a></li> </ul> </div> <div class='clearfix visible-xs'></div> <div class='col-sm-2 col-xs-6'> <h4>Stay in Touch</h4> <ul class='list-unstyled'> <li><a href='about.html'>About</a></li> <li><a href='contact.html'>Contact Us</a></li> <li><a href='/blog'>Blog</a></li> <li><a href='http://twitter.com/codeschool'>Twitter</a></li> <li><a href='http://facebook.com/codeschool'>Facebook</a></li> </ul> </div> <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'> <h4>Contact Us</h4> <ul class='list-unstyled'> <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li> <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li> <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:[email protected]'>[email protected]</a></li> </ul> <p>Blasting Off With Bootstrap ©2214.</p> </div> </div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script src='js/bootstrap.min.js'></script> </body> </html>
It doesn't make sense to left align our 3 transport systems. Center the text in all cells within that .row.
<div class='row text-center'> <div class='transporter col-md-3 col-md-offset-1'> <h3>Transporter</h3> <ul> <li>8 second travel time</li> <li>Chance of death only 1 in 7,593</li> <li>Low price of only $15.99!</li> </ul> <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p> </div>
Like the lists in our footer, we don't need bullet icons next to our lists here either. Remove them from each of the lists in the transport systems section.
<ul class="list-unstyled">
Each of the three transport systems could stand out a bit more. Add a class to eachdiv that would change the background color and add a rounded border to each. Within this area, include the title (like "Transporter") and the list of items.
<div class='transporter col-md-3 col-md-offset-1 well'> <h3>Transporter</h3> <ul class="list-unstyled"> <li>8 second travel time</li> <li>Chance of death only 1 in 7,593</li> <li>Low price of only $15.99!</li> </ul> <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p> </div>
Our unstyled buttons are painful to look at. Add Bootstrap classes to the Transporterbutton to have it use the Bootstrap button styling. Also change the color to be similar to our footer link colors.
If you need a refresher on Bootstrap colors, checkout the Bootstrap Button Documentation.
<button class="btn btn-info"><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button>
-----------------
Links: http://getbootstrap.com/css/#buttons