Learn Bootstrap
Learn how to use one of the most popular front-end frameworks, Bootstrap 4, to quickly layout and style your website!
Start
- 1Creating a website from scratch can take a lot of work and require a working knowledge of HTML, CSS, and maybe some JavaScript. But with Bootstrap, the amount of work and prior knowledge is reduced…
- 2Bootstrap simplifies the layout of a website using a grid system. For us to fully take advantage of Bootstrap’s grid system, we need to understand how to structure our HTML. At the heart of it, _…
- 3Bootstrap uses a grid system based on CSS Flexbox which organizes content in rows or columns. As seen in the previous exercise, Bootstrap also uses rows and columns and in this exercise we’ll lea…
- 6In the previous exercise, we saw how columns take on a default width based on the size of the row. However, Bootstrap gives us more customization options so that we can make columns of varying widt…
- 7Another option we could use to set the width of a column is the content inside the column. If we want to use the content to set a column’s width, we append “auto” to the class of the column, for …
- 8One benefit of using Bootstrap is that it incorporates responsive design. With responsive design, the layout of the content changes to accommodate a user’s screen size. Bootstrap categorizes sc…
- 9Using Bootstrap, we can freely change the layout of our content using grid. We can even customize how our content on the grid changes based on breakpoints (extra small, small, medium, large, extra …
- 10In the previous exercise, we went over how to follow Bootstrap naming conventions to add breakpoint requirements for a column. We can go one step further and add multiple classes to our columns for…
- 11Great job navigating through Bootstrap’s grid! Let’s review some key concepts: * When in doubt, check Bootstrap’s documentation . * There are a few required links to use Bootstrap (the CSS fil…
- 1The Bootstrap framework allows us to streamline webpage layout and styling. In this lesson, we’re going to focus on using Bootstrap’s utility classes that provide additional styling and components …
- 2Bootstrap utility classes provide an element with styling and purpose. Let’s get acquainted with utility classes by styling the color of our elements. Let’s say we want to change the text color o…
- 3If we want to style and format text, we can use Bootstrap’s text utility classes . For instance, if we want our text to be bold, we could add a class of “font-weight-bold” like so: This rende…
- 4When considering the layout of a webpage, we have to think about how to position our elements. Conveniently, Bootstrap provides positioning utility classes. We can apply CSS positioning styling b…
- 5In addition to useful utility classes, Bootstrap offers a collection of components, such as a navbar, buttons, a carousel/slideshow for images, and much more! Each Bootstrap component serves a di…
- 6Another common component we see on websites are buttons. Buttons represent a clickable object that does something else in return like navigating to a different page, submitting a form, or opening a…
- 7Bootstrap also allows us to quickly add interactivity to a webpage. One way to include interactivity is to toggle the visibility of an element. To add such a feature, we need two elements and a f…
- 8Let’s combine our knowledge of collapse, buttons, and the nav component to make a responsive navbar! We often find navbars at the top of websites and we can use a navbar to quickly navigate to usef…
- 9In arenas and stadiums, there are giant screens called jumbotrons which display the main event for everyone in the crowd to see. Bootstrap also offers a jumbotron component that serves a similar …
- 10Bootstrap also has a card component that serves as a container for smaller customized content. Card components are often grouped together to display a collection of similar content in manageable …
- 11There are times that we want to showcase a group of images but not want to have our users scroll through one picture on top of another. Instead, we could fit our images into a slideshow using Boots…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Learn Bootstrap
Start