Learn about the fundamentals that make the awesome websites we use on a daily basis. Using devices from mobile phones to tablets to desktop computers. A step by step process is used to show everything from setting up to essential Bootstrap and responsive design features.
Gain a good understanding of the following concepts:
Bootstrap is the most popular responsive web framework in the world, most modern websites use Bootstrap.
You will be provided with the full source code to aid in development during and after this course. The source code is free to use in as many projects as you wish.
We will walk through the process of setting up Bootstrap 4 to create websites.
Bootstrap API Guide Grid Link
Learn more about the different grid sizes that make up the following layouts:
Learn how to use varying grid sizes to create better and more responsive websites.
Learn how to move columns to position content where you would like on your website.
Learn how to incorporate more than one row into your website.
We will now learn about how you can nest columns to create even finer tweaking on your website to position and size content dynamically.
Learn how to rearrange columns to optimally position content for the most immersive user experience.
Test your knowledge on the famous Bootstrap Grid System.
Learn how to add media objects to your website.
Bootstrap API Guide Media Object Link
Learn how to nest media objects into different components.
Now we will cover how to precisely position media objects on our website.
Test your knowledge on Media Objects.
Bootstrap API Guide Buttons Link
Group a series of buttons together on a single line with the button group.
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.
Test your knowledge on buttons.
Easily extend form controls by adding text, buttons, or button groups on either side of textual
Bootstrap API Guide Input Groups Link
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site
Bootstrap API Guide Jumbotron Link
Labels provide a means for adding simple yet useful information to your website.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Bootstrap API Guide Alerts Link
Let's see how your knowledge is on the cool Bootstrap features.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Bootstrap API Guide Cards Link
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported
You can quickly change the text alignment of any card in its entirety or specific parts with text align classes.
Add an optional header and/or footer to enhance the cards.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card
Turn an image into a card background and overlay your card’s text.
By default, cards use dark text and assume a light background. You can reverse that by toggling the
color of text within, as well as that of the card’s subcomponents, with
.card-inverse. Then, specify a dark
border-color to go with it.
Cards include their own variant classes for quickly changing the
border-color of a card. Darker colors require the use of
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use
display: flex; to achieve their uniform sizing.
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
Cards can be organized into Masonry-like columns with just CSS by wrapping them in
.card-columns. Cards are built with CSS
column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to
display: inline-block as
column-break-inside: avoid isn’t a bulletproof solution yet.
How much do you know about card?
Bootstrap API Guide Navigation Link
.nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.
Takes the basic nav from above and adds the
Learn how to implement a dropdown to improve navigation.
Learn about nav tab panes.
Bootstrap API Guide Navigation Bar Link
The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. It’s easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviours
Theming the navbar has never been easier thanks to the combination of theming classes and
background-color utilities. Choose from
.navbar-light for use with light background colors, or
.navbar-inverse for dark background colors. Then, customize with
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. Note that
position: sticky, used for
.sticky-top, isn’t fully supported in every browser
Learn how to make our navigation bar collapsible.
Now lets make our navbar responsive to support all devices including mobile.
Let's navigate your skillset :D
Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes.
Learn about Pager navigation in Bootstrap.
List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class.
Let's up our list group game.
Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.
Add small overlay content, like those found in iOS, to any element for housing secondary information
Extend the default collapse behaviour to create an accordion.
See if you know the extra parts of Bootstrap.
I am CEO of Sonar Systems which is the world leader in educational material for the game engine Cocos2d-x, one of the best and most popular game engines in the world. With years of experience programming and running an online education platform (Sonar Learning) I can help and support new programming like you.
I am also a University Lecturer teaching a variety of topics in Games Programming from Games Design to OpenGL Shader Programming.
I am also a published author of games design and soon to be released Responsive Web Design. I have all the facets required to educate and inspire.