In this section we'll learn how to create fluid and responsive layouts with the use of breakpoints, Bootstrap's powerful grid system and more.

In this lecture we'll learn how to create containers. Containers are used to limit the width of content and center it in the viewport.

In this lecture we'll learn how to use the grid system and breakpoints to make responsive and fluid layouts.

In this section we'll learn how to structure all kinds of content, including typography, images, figures, tables and code blocks.

In this lecture we'll learn about the Reboot stylesheet, that gives us a consistent and simple baseline to build upon.

In this lecture we'll learn how to use typograhy. We can use some basic styling for headings, paragraphs, blockquotes, lists and more.

In this lecture we'll learn how to use images. We can make them responsive, apply some styling and align them.

In this lecture we'll learn how to use figures. Figures are used when you need to display an image with a related caption.

In this lecture we'll learn how to use tables. The different styles for this kind of content includes inverted colors, table head styles, striped rows, bordered table, hoverable rows, small table, contextual color classes and responsive table.

In this lecture we'll learn how to use code. Code can be formatted as either inline code snippets or multiline blocks of code, and specific tags are used for different kinds of code. Large blocks of code can have a max-height and vertical scroll.

In this section we'll learn how to build all of the 24 components, including buttons, cards, carousels, dropdowns, forms, modals and navigation.

In this lecture we'll learn about the alert component. Alerts provide contextural feedback messages for typical user actions.

In this lecture we'll learn about the badge component. Badges are small and adaptive tags for adding context to different kinds of content.

In this lecture we'll learn about the breadcrumb component. A breadcrumb component is used to indicate the current page's location in a navigational hierarchy.

In this lecture we'll learn about the button component. Buttons are used for actions in forms, dialogs and more. They are available in different variations, in different sizes, with different states, and as either checkboxes or radio buttons.

In this lecture we'll learn about the button group component. Button groups are used to group together a series of buttons on a single line, for example to create a toolbar.

In this lecture we'll learn about the card component. The card component is a flexible content container that includes options for title, subtitle, header, footer, image and various content as well as contextual background colors and various layouts.

In this lecture we'll learn about the carousel component. The carousel component is used as a slideshow for various kind of content, and it comes with controls, indicators and captions and different options for behavior.

In this lecture we'll learn about the collapse component. The collapse component is used to toggle content on the page.

In this lecture we'll learn about the dropdown component. Dropdowns are contextual overlays that can be toggled to show a list of links.

In this lecture we'll learn about all the different form controls including custom controls found in Bootstrap.

In this lecture we'll learn about how to layout forms in Bootstrap. This can be done using the grid system, but it's also possible to create inline forms and horizontal forms.

In this lecture we'll learn about the different validation methods provided by Bootstrap. You can choose between the native browser validation and the custom Bootstrap validation. The custom Bootstrap validation can be applied client-side and server-side and can have help text as regular text and as tooltips.

In this lecture we'll learn about input groups. With input groups we can add text, checkboxes, radio buttons, buttons, button groups and dropdowns on either side of text input elements.

In this lecture we'll learn about the jumbotron component. The jumbotron is a flexible component that you can use to show for example key marketing messages on your page.

In this lecture we'll learn about the list group component. This is a flexible component for displaying a series of content as a list.

In this lecture we'll learn how to create media objects. The media object is a flexible component for building repetitive patterns where media is positioned alongside content.

In this lecture we'll learn about the modal component. Modals are flexible dialog prompts, and they come with different options for functionality and styling.

In this lecture we'll learn about the nav component. Navs can be styled with tabs and pills and they can have dropdown and pane functionality.

In this lecture we'll learn about the navbar component. The navbar component functions as a wrapper that positions branding, navigation and other elements in a responsive header.

In this lecture we'll learn about the pagination component. Pagination links indicate that a series of related content exists across multiple pages. This is useful for long lists of content like search results.

In this lecture we'll learn about the popover component. With popovers we can add small overlay content to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

In this lecture we'll learn about the progress component. The progress component can be used to display simple and complex progress bars that can be stacked with options for adding labels, stripes and animated stripes.

In this lecture we'll learn about the scrollspy component. The scrollspy component is used to automatically update navigation targets based on scroll position.

In this lecture we'll learn about the spinner component. The spinner component is used to indicate the loading state of a component or page.

In this lecture we'll learn about the toast component. The toast component is used to push notifications to your visitors.

In this lecture we'll learn about the tooltip component. You can easily add tooltips to links and buttons with different options for custom HTML, position, animation, delay, triggers and offsets.

In this section we'll learn how to use all of the 19 utilities, including easy ways to change color, sizing, spacing and typography.

In this lecture we'll learn about the border utilities. With border utilities you can quickly style the border and border-radius of an element. You can for example remove borders and provide different kinds of border-radius for images.

In this lecture we'll learn about the clearfix utility. With this utility you can easily clear floats by adding a class to the parent element.

In this lecture we'll learn about the close icon. With Bootstrap you can easily create a generic close icon for dismissing content like modals and alerts.

In this lecture we'll learn about the color utilities. Bootstrap provides contextual colors classes for text color, link color and background color.

In this lecture we'll learn about the display utility. You can easily change an element's display property with a simple use of some classes. Responsive classes are supported.

In this lecture we'll learn about the embed utilities. With these utilities you can preserve the intrinsic aspect ratio for embedded elements: iframes, embeds, videos and objects.

In this lecture we'll learn about the flex utilities. With these you can quickly manage the layout, alignment and sizing of grid columns, navigation, components and more.

In this lecture we'll learn about the float utility. With this utility you can control the floating of elements responsively.

In this lecture we'll learn about the image replacement utility. We can use the image replacement utility to help replace an element's text content with a background image.

In this lecture we'll learn about the overflow utility. Use this utility to control how content overflows an element.

In this lecture we'll learn about the position utility. The position utility is helpful for placing elements outside the normal document flow as either fixed or sticky positioned.

In this lecture we'll learn about the screen reader utility. With this utility you can hide an element in all devices except for screen readers. You can also control if it should show again when gaining focus for example by navigating with a keyboard.

In this lecture we'll learn about the shadows utility. With this utility you can easily remove box shadows or add three sizes of shadows: small, regular and large.

In this lecture we'll learn about the sizing utilities. With sizing utilities you can control the width and height of elements very easily.

In this lecture we'll learn about the spacing utilities. With spacing utilities you can control the margin and padding of one or more sides of elements across different device sizes.

In this lecture we'll learn about the stretched link utility. Use this to make any HTML element or Bootstrap component clickable by "stretching" a nested link.

In this lecture we'll learn about the text utilities. With text utilities you can for example align the text, transform the characters and change the font weight and style.

In this lecture we'll learn about the vertical align utilities. With vertical align utilities you can change the alignment of inline elements, including inline-block, inline-table and table cell elements.

In this lecture we'll learn about the visibility utility. With this utility you can toggle only the visibility of an element, so the display property isn't modified. In this way the element can still affect the flow of the document.

In this section we'll learn how to build some common web templates that can be used in real websites. We'll use different layout styles and content and use a mix of the different components and utilities.

In this lecture we'll learn how to build a photo gallery template. We'll be using a heading, a lead paragraph, pagination components and figures.

In this lecture we'll learn how to build a video gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

In this lecture we'll learn how to build a mixed gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

In this lecture we'll learn how to build an audio gallery template. We'll be using a heading, a lead paragraph, pagination components, figures and responsive embeds.

In this lecture we'll learn how to build a login template. We'll be using a heading element, a full-width jumbotron component with fixed-width content, various form elements and buttons.

In this lecture we'll learn how to build a contact template. We'll be using various typography elements, form elements, buttons and a responsive embed of Google Maps.

In this lecture we'll learn how to build a footer template. We'll be using unordered lists, the dropdown component and various typography elements for headings, address and abbreviations.

In this lecture we'll learn how to build a sitemap template. We'll be using heading elements and nested, unordered lists.

In this lecture we'll learn how to build a shortcuts template. We'll be using the modal component and HTML tags for code content.

In this lecture we'll learn how to build an FAQ template. Frequently Asked Questions. We'll be using a heading and an accordion with card components build with the collapse component.

In this lecture we'll learn how to build a thank you template. We'll be using a full-width jumbotron component with fixed-width content.

In this lecture we'll learn how to build an employees template. We'll be using heading elements, images and inline lists.

In this lecture we'll learn how to build a pricing table template. We'll be using card components with card headers, card blocks, card text, list groups and card footers as well as contextual color classes.

In this lecture we'll learn how to build a create account template. We'll be using a full-width jumbotron component with fixed-width content, a lead paragraph, various form elements, buttons and an alert.

In this section you will learn about the more advanced parts of Bootstrap 4. First of all you will learn how to customize the default styling using your own colors, sized and more. Then you will learn to add web fonts and icon fonts to your page. Finally, you will learn about JavaScript triggers, options, methods and events, which are used when you want to work with the interactive Bootstrap components.

In this lecture we'll learn how to customize the default Bootstrap 4 styling with SASS. We'll see examples of how to change colors, spacing, breakpoints, border-radius and padding.

In this lecture we'll learn how to use Google Fonts on our Bootstrap pages. This is a free and quick way to get access to over 800 web fonts hosted by Google.

In this lecture we'll learn how to add icons to our Bootstrap pages with Font Awesome 4. This is a free and quick way to get access to 675 icons.

Download and install the latest version of Font Awesome: Font Awesome 5.1.

In this lecture we'll learn about JavaScript triggers, options, methods and events used by some of the components in Bootstrap 4. We'll see an example of how to use triggers and options for a popover component and how to use methods and events for a carousel component.

An overview of what you'll learn in this project.

In this lecture we'll create our navigation menu that consists of a fixed navbar with scrollspy functionality.

In this lecture we'll create our jumbotron section that consists of a jumbotron component with a heading, some paragraphs and buttons.

In this lecture we'll create our description section that consists of a heading and two paragraphs.

In this lecture we'll create our trailer section that consists of a heading, a paragraph and a responsively embedded YouTube video.

In this lecture we'll create our showcase section that consists of a heading, a paragraph and a carousel with four slides.

In this lecture we'll create our features section that consists of four blocks with a heading, a paragraph and a button.

In this lecture we'll create our pricing section that consists of a heading and three cards with card header, card text, list group and card footer.

In this lecture we'll create our reviews section that consists of four blockquotes with a paragraph and a blockquote footer.

In this lecture we'll create our newsletter section that consists of a heading, some form elements and a modal.

In this lecture we'll create our footer section that consists of various links (including social links), address, inline list and a dropdown.

In this lecture we'll add grid classes to turn our layout into a responsive grid.

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing, color, flex and screenreaders.

In this lecture we'll add some custom CSS to create a full-size background image with a simple parallax effect.

In this lecture we'll use the Font Awesome icon font to add icons to our page.

In this lecture we'll use Google Fonts for our headings and body text.

In this lecture we'll add a smooth scroll JavaScript plugin to create a scrolling animation when navigating the page.

An overview of what you'll learn in this project.

In this lecture we'll create our navbar – with an inline search form – and a breadcrumb.

In this lecture we'll create our board overview, which consists of a number of tables with responsive behavior.

In this lecture we'll create our section for member info and statistics. These are build with the card component with various content inside.

In this lecture we'll create our footer section.

In this lecture we'll add grid classes to turn our layout into a responsive grid.

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing, color, flex and screenreaders.

In this lecture we'll create another page for our project with an overview of a forum category.

In this lecture we'll create another page for our project with an overview of a topics in a forum.

In this lecture we'll create a combined filter and sorting widget for our topics overview as well as a pagination component.

In this lecture we'll create another page for our project showing a specific post.

In this lecture we'll create another page for our project with a form to create a new topic.

In this lecture we'll take a look at our finished project.

An overview of what you'll learn in this project.

In this lecture we'll create our navbar with dropdowns and inline search form.

In this lecture we'll create our header of the blog post with badges and links.

In this lecture we'll create the content of our post featuring a figure element with a figure caption and various kinds of text content: a lead paragraph, regular paragraphs and a blockquote with a blockquote footer.

In this lecture we'll create our comments section with media objects, nested media objects and a form to add a comment.

In this lecture we'll create our author section with a card component that has an image, an inline list, a heading and some text.

In this lecture we'll create our related posts section with the list group component with various content inside each list group item.

In this lecture we'll create our categories section with the list group component with various contextual background color classes.

In this lecture we'll create our tag cloud section with the card component and several badge components.

In this lecture we'll create our about the blog section with the card component and some text.

In this lecture we'll create our newsletter section with the card component and a simple signup form with an input group.

In this lecture we'll create our footer section with unstyled unordered lists, an address with abbreviations and an inline list.

In this lecture we'll add grid classes to turn our layout into a responsive grid.

In this lecture we'll use different utilities to adjust the layout of our page, including utilities for spacing and color.

In this lecture we'll use the Font Awesome icon font to add icons to our page.

In this lecture we'll adjust the page for a text blog post to a photo gallery blog post.

In this lecture we'll adjust the page for a photo gallery blog post to a video blog post.

In this lecture we'll adjust the page for a video blog post to an audio blog post.

In this lecture we'll create an overview of blog posts in a list format.

In this lecture we'll create an overview of blog posts in a grid format.