Getting Started with Bootstrap 3
Published May 19, 2016 by Bryan Miller
Looking to immerse yourself in the world of web development and responsive web design? Twitter’s Bootstrap is a great way for budding developers to get their feet wet and for veteran developers to save a ridiculous amount of development time with this boilerplate HTML/CSS/JS library. For newbies and veterans alike, you have fully compiled, minified, syntactically-awesome libraries to include in your web project — along with well thought-out documentation to guide you. Bootstrap provides you with predefined classes, styles, and scripts to get your web project up and running while reducing your initial development workload.
Here is how you can get started with Bootstrap 3!
Include Bootstrap resources in your <head></head> (or if working on a WordPress platform, include them via functions.php). You can deliver these libraries via Bootstrap’s CDN (extremely fast delivery, most likely a much faster response time than a shared host request) or you can download them and include the files in your local website directory. Be sure to include your custom stylesheets after Bootstrap CSS and jQuery before Bootstrap JS.
Including via CDN (copy-pasta):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Bootstrap Components
Navbar
The navbar is a responsive element that contains your website’s navigation. You can modify this element with the many predefined classes here. The breakpoint for this element (when the responsive menu kicks in) is 767px.
Glyphicons
Bootstrap comes loaded with many useful icons, particularly useful for UI elements, or content indicators. Add any of the classes from this list to any icon element on your web project and you’ve got fully rasterized, vector icons.
Responsive Grid
Bootstrap is famous for it’s responsive grid classes, these classes will help you implement responsive features to the elements on your page without having to write any custom styles or define any media queries! The idea is this: responsive elements are contained within a row (defined by class=”row”) and the elements therein are defined with classes that decide at which breakpoint the content will become “responsive” or reorganize on the user’s screen for the optimal mobile viewing experience. Each “row” contains elements in combinations of 12 “columns” defined by the class=”col-(size)-(#)”. The (size) can be replaced by “xs”, “sm”, “md” or “lg” telling the browser which breakpoint to restructure content on. The (#) can be replaced by any number 1-12 to define the width of the column for each breakpoint.
From Bootstrap Docs:
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding.- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like
.rowand.col-xs-4are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.- Columns create gutters (gaps between column content) via
padding. That padding is offset in rows for the first and last column via negative margin on.rows.- The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4.- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any
.col-md-*class to an element will not only affect its styling on medium devices but also on large devices if a.col-lg-*class is not present.Look to the examples for applying these principles to your code.
Read the full docs on Bootstrap grids here.
Responsive Images:
Simply add the class “img-responsive” and any image will scale to the width of your screen (limited by the width of the container of the image element). Image not centering on larger resolutions? Add the “center-block” class following “img-responsive” to center the image in the container. More handy responsive classes for images here.
Buttons
Bootstrap’s custom theme comes with defined classes for buttons, links, and more! See a list of custom styles for buttons here.
More Bootstrap Goodies
The full documentation can be found here. If you’re serious about utilizing Bootstrap to it’s full potential, I highly recommend you spend some time reading through the documentation to get a feel for what Bootstrap has to offer!
Bryan Miller
Bryt Designs
Bryan Miller is an entrepreneur and web tech enthusiast specializing in web design, development and digital marketing. Bryan is a recent graduate of the MBA program at the University of California, Irvine and continues to pursue tools and technologies to find success for clients across a varieties of industries.
Subscribe to our newsletter
STAY UP TO DATE WEB DESIGN, DEV, & SEARCH MARKETING INSIGHTS & TIPS
Suggested Content
What is a Webhook? Understanding Its Functionality and Applications
Published 2024-10-28T06:00:00 by Grant Walton
The Future of Websites: Navigating Web 3.0 with Headless CMS
Published 2024-03-18T06:00:00 by Devin Jackson
Headless CMS in Web Development: A Comprehensive Guide
Published 2024-03-04T06:00:00 by Grant Walton