Using Bootstrap 5 isnt too difficult. This article will tell you what Bootstrap 5 is and how to use it.
Using Bootstrap 5 isn't too difficult. This article will tell you what Bootstrap 5 is and how to use it .
What is Bootstrap?
- Bootstrap is a free front-end framework that helps users develop websites faster and easier.
- Bootstrap includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, images, and more, as well as optional JavaScript plugins.
- Bootstrap also gives you the ability to easily create responsive website designs.
What is responsive web design?
Responsive web design involves creating websites that automatically adjust to look good on various devices, from small phone screens to large computer monitors.
Why use Bootstrap?
The advantages of using Bootstrap are:
- Easy to use: Anyone with just basic knowledge of HTML and CSS can use Bootstrap.
- Responsive feature: Bootstrap's CSS Responsive feature allows websites to adapt to different screen sizes, such as phones, tablets, and computers.
- Mobile-first approach: In Bootstrap, mobile-first styles are a core part of the framework.
- Browser compatibility: Bootstrap 5 is compatible with all popular browsers: Chrome, Firefox, Edge, Safari, and Opera. Note that if you need support for viewing on IE11, please use BS4 or BS3.
The differences between Bootstrap 5 and Bootstrap 3 & 4
As mentioned earlier, Bootstrap 5 is the latest version of Bootstrap, featuring new components, a faster stylesheet, and more responsive design. Bootstrap 5 supports the latest stable versions of all popular browsers. However, Internet Explorer 11 and earlier versions are not supported.
The main and most noticeable difference between Bootstrap 5 and Bootstrap 3 & 4 is that Bootstrap 5 has switched to JavaScript, not jQuery as in previous versions.
Note: Bootstrap 3 and Bootstrap 4 are still supported by the developers with bug fixes and documentation changes. Therefore, you can rest assured when using older versions. However, new features will not be available on them.
Therefore, if you want to experience the latest features of Bootstrap, switch to version 5 immediately.
Note : Bootstrap 3 and Bootstrap 4 are still supported by the development team with bug fixes and important documentation changes, so you are perfectly safe to continue using them. However, new features will NOT be added.
Example of Bootstrap 5:
This is the QuanTriMang Bootstrap page.
Resize this page to see the effect!
Column 1
The content of the first paragraph in column.
For the following text sections, you can learn Bootstrap 5 on the QuanTriMang.com website.
Column 2
The content of the first paragraph in column.
For the following text sections, you can learn Bootstrap 5 on the QuanTriMang.com website.
Column 3
The content of the first paragraph in column.
For the following text sections, you can learn Bootstrap 5 on the QuanTriMang.com website.
Download Bootstrap 5
You can download Bootstrap 5 from the manufacturer's website: https://getbootstrap.com/ or download it using the download button below:
Download Bootstrap 5
Alternatively, if you don't want to download Bootstrap, you can use Bootstrap 5 directly from a CDN (Content Delivery Network). jsDelivr provides CDN support for Bootstrap CSS and JavaScript; you just need to declare it as follows:
Advantages of using Bootstrap 5 CDN:
It's possible that some users downloaded Bootstrap 5 from jsDelivery when visiting another website that uses a Bootstrap 5 CDN. Therefore, it will be reloaded from the cache when they visit your website, resulting in faster loading times. Additionally, most CDNs ensure that when a user requests a file, the necessary files are accessed from the server closest to them, which also leads to faster loading times.
JavaScript in Bootstrap
Bootstrap 5 uses JavaScript for various elements (such as modals, tooltips, pop-ups, etc.). However, if you only use the CSS part of Bootstrap, you won't need it.
How to create your first website with Bootstrap 5
1. Add HTML5 document types
Bootstrap 5 uses HTML elements and CSS attributes that require the document type to be HTML5.
Always include the HTML5 document type at the top of the page, along with the attributes lang, heading, and charsetexact match:
Ví dụ về Bootstrap 5 trên QuanTriMang 2. Bootstrap 5 prioritizes mobile devices.
Bootstrap 5 is designed for responsive web design on mobile devices. To ensure proper display and touch zoom functionality, add the following tag to the element :
- This section
width=device-widthwill set the page width to match the screen width of the device (this varies depending on the device). - This section
initial-scale=1will set the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap 5 requires a container element to wrap the website content. There are two container classes you can choose from and use, including:
- The class
.containerprovides a responsive container with a fixed width.
- The class
.container-fluidprovides a full-width container that spans the entire width of the viewport.
2 basic Bootstrap 5 pages
The following example is basic Bootstrap 5 page code, with a responsive, fixed-width container:
Ví dụ Bootstrap QuanTriMang's first Bootstrap page
This part is located within a .container class.
This `.container` class provides a responsive, fixed-width container.
The following example is a basic Bootstrap 5 page code, with a full-width container:
Ví dụ Bootstrap QuanTriMang's first Bootstrap page
This part is located in the .container-fluid class.
The `.container-fluid` class provides a full-width container that spans the entire width of the viewport.
Update to the latest Bootstrap 5
Bootstrap 5.3.0
Dark mode
This is one of the standout features of Bootstrap 5.3.0. The dark mode toggle button allows web users to quickly switch between light and dark backgrounds to suit their environment.
To use this feature, simply add the attribute data-bs-toggle="dark-mode" to any button or link element.
For example:
Font size adjustment utility
This utility allows you to quickly adjust text size based on a predefined ratio. You can use it with Bootstrap's typography class.
For example:
This is the largest font size
This is a slightly smaller font size
This is a medium font size
This is a small font size
This is the smallest font size
Gutter Utility
This great addition allows you to add gutter between columns in a grid layout without having to write custom CSS.
For example:
Column 1 Column 2 Update form processing features.
This feature in Bootstrap 5.3.0 aims to improve consistency and usability. New form controls include new styling for checkboxes, radio buttons, and selectors, as well as improved validation feedback.
Checkboxes and Radio Buttons
Bootstrap 5.3.0 introduces new styles for checkboxes and radio buttons, making them easier to use and access. The new designs feature a larger click area and improved focus indicators, making it easier to interact with these inputs.
Here are examples of how you can use the new checkbox styles:
This is an example of how to use the new radio button style.
Note that this markup method uses the `.form-check-input` class to style the input element itself and the `.form-check-label` class to style the label.
Above are the most basic concepts of Bootstrap 5 that you should be familiar with. Continue following our subsequent articles on QuanTriMang.com to understand and learn how to use Bootstrap 5!