Bootstrap 5 Best Framework for creating amazing Websites

Learning with a framework

I bought a Bootstrap 5, Framework, course on Udemy. Since I already know the teacher and have some of his courses, I am now trying this new course. Unfortunately, there isn't a huge selection of this topic on Udemy. Version 5 is still relatively new. You can only find older versions.

So I have now waited some time to start this course. Of course, you can also look on YouTube to see if you can find the right one. But apart from crash courses, I haven't found much. Here I have a useful video from Brad Traversy.

If you have already worked with the framework, you can safely skip the first two sections. Of course, it is not recommended for those who have no idea about bootstrap. You should already know the basic functions.

Basic

The basic functions include typography, colors, texts, spacing with margins and paddings, Sizing, positioning, breakpoints and containers. The headings and texts can be changed with different classes. There are various inline text elements, text-decoration, and text alignment. But also text wrapping and overflow, text transformation, font-weight and italics, text size, and line height.

Text elements:

Mark - the text is highlighted
Del - the text is struck through
S - has the same effect as del
Ins - the text is underlined
U - underlined the text is underlined
Small - the text becomes smaller
Strong - the text is highlighted
Em - the text is displayed in italic

Text decoration begins with class = “text-decoration-… underline is underlined, line-through is crossed out and none removes the decoration. Finally, there is text alignment. Start, center and end. Bootstrap also has its own colors. A distinction is made here between bg-primary up to black-50 and white-50. Just look it up on the Bootstrap website under Color.

Grid and Flexbox

Bootstrap's grid system uses a series of containers, rows, and columns to layout and aligns content. It is equipped with flexbox and is fully responsive. How does this work? The grid system has 6 breakpoints. With these breakpoints, the page can be fixed to different sizes. This means that the content must adapt to different screen sizes. You use rows and columns for the grid.

Containers center and cushion their content horizontally. Use .container for a responsive pixel width, .container-fluid for the width: 100% across all viewports and devices or a responsive container (e.g. .container-md) for a combination of fluid and pixel widths.

Columns are incredibly flexible. There are 12 template columns available per row, which you can use to create different combinations of elements that span any number of columns. Column classes specify the number of template columns to be spanned (e.g. column-4 has four). Widths are given in percentages so they are always the same relative size. You can read more about this under Doc on the original website.

Components

Bootstrap has several components. With these, you can align your website differently. With the carousel, you can easily integrate a slideshow. Also pictures in cards, galleries, price tables, and much more. Styling is very easy to achieve with classes. Also the navigation bar with the Hamburger menu. A drop-down menu can be integrated very easily.

You can add Lists, lists groups, and buttons with simple steps. How about an accordion or number of pages? Pagination or Modal? This is also not a problem with frameworks. These can be easily created with little effort. Even inexperienced or beginners can use Bootstrap to create beautiful, simple but also more complex websites. If you want a different styling, you can also achieve this with extended CSS or SASS.

Icons for Framework

With Font Awesome you can integrate icons into your website. Font Awesome offers scalable vector icons that are instantly customizable - size, color, drop shadow, and anything that can be done with the power of CSS.

But Bootstrap also has its own icons that you can use. You can find it here. Free, high-quality, open-source symbol library with over 1,300 symbols. Add them however you want - SVGs, SVG sprite, or web fonts. Use them with or without bootstrap in any project.

Icons can be integrated very nicely into the menu and footer. Also suitable for links to social media pages. You can also change the size of the icons.

Themes

With Bootstrap you can quickly create themes and templates. You can then use these in turn for various customer projects and you don't have to start from scratch every time. It is really advisable to create a library and then accesses it when necessary.

But there are also ready-made templates on the Internet, some of which you can download for free. They are very nicely designed and easy to use and modify. They can be designed individually for every need. You can find them under Free Bootstrap Themes and Templates.

So what are you waiting for? Learn Bootstrap 5 and Build Amazing Websites. You can then share your projects in a group. My groups are Javascript and HTML, or if you want to help someone with your project Web Developer Help Group.

My teacher is Menyhart Norbert and he also has tutorials on YouTube. You can go to his page and browse there. His carousel using HTML CSS + Bootstrap and JS is very interesting.

Here is the finished project. Modern carousel with bootstrap. If you want to know more about the course write me in the comment. I will keep you up-to-date.