3 Ways to Use
Bootstrap for Various Needs
Bootstrap is a free and open-source web developer framework that can be used to create websites or web applications. This tool provides various ready-to-use components, a flexible grid system, and supports mobile-friendly access.
However, many people still don’t know how to use Bootstrap properly. Therefore, read this article to find out a guide on how to download, modify, and create various components in Bootstrap!
1. Download Bootstrap
Before you start, you need to download or prepare Bootstrap first. There are several ways to do this, namely using CDN, npm, and through the Laravel or React framework.
Using CDN
The fastest and easiest way to use Bootstrap is through a Content Delivery Network (CDN). You only need to add the Bootstrap link to the HTML file without having to download or install anything.
– Open the HTML file and add the Bootstrap CSS link inside <head>:
– Add the Bootstrap JavaScript script before the closing </body>:
– Start using Bootstrap classes such as container, btn btn-primary, or row in your HTML.
Installation via npm
For larger projects or using modern workflows, we recommend installing via npm. This way, you can integrate it with tools like Webpack, Laravel Mix, or Vite.
Make sure you have Node.js and npm installed on your device.
Open a terminal and run the following commands:
Import Bootstrap into your JavaScript or SCSS file
Run your build tool (e.g. with npm run dev or npm start)
If you are using Sass, you can import the Bootstrap source files to customize it further.Bootstrap is a free and open-source web developer framework that can be used to create websites or web applications. This tool provides various ready-to-use components, a flexible grid system, and supports mobile-friendly access.
However, many people still don’t know how to use Bootstrap properly. Therefore, read this article to find out a guide on how to download, modify, and create various components in Bootstrap!
1. Download Bootstrap
Before you start, you need to download or prepare Bootstrap first. There are several ways to do this, namely using CDN, npm, and through the Laravel or React framework.
Using CDN
The fastest and easiest way to use Bootstrap is through a Content Delivery Network (CDN). You only need to add the Bootstrap link to the HTML file without having to download or install anything.
– Open the HTML file and add the Bootstrap CSS link inside <head>:
– Add the Bootstrap JavaScript script before the closing </body>:
– Start using Bootstrap classes such as container, btn btn-primary, or row in your HTML.
Installation via npm
For larger projects or using modern workflows, we recommend installing via npm. This way, you can integrate it with tools like Webpack, Laravel Mix, or Vite.
Make sure you have Node.js and npm installed on your device.
Open a terminal and run the following commands:
Import Bootstrap into your JavaScript or SCSS file
Run your build tool (e.g. with npm run dev or npm start)
If you are using Sass, you can import the Bootstrap source files to customize it further.
Bootstrap Integration with Laravel or React Framework
Did you know that Bootstrap can be integrated with modern frameworks like Laravel or React? This can increase the speed of creating web applications compared to the usual ones.
Integration with Laravel
Install Bootstrap via npm with the following code
bash
npm install bootstrap
Next, import Bootstrap in resources/js/app.js
javascript
import ‘bootstrap’;
Compile assets with this command
bash
npm run dev
Integration with React
Install Bootstrap and React Bootstrap with the following command
bash
npm install bootstrap react-bootstrap
Then, import it in the React component using this code
javascript
import ‘bootstrap/dist/css/bootstrap.min.css’;
import { Button } from ‘react-bootstrap’;
Bootstrap is ready to be used in your React component!
2. Modifying Bootstrap
To make the Bootstrap platform fit your project needs, you can easily modify it. Here are some Bootstrap modification options for your inspiration:
1. Override CSS with External Files
The easiest way to customize the appearance of Bootstrap is to add a custom CSS file after the Bootstrap CSS file. In this file, you can override the existing Bootstrap classes.
Create a custom.css file and place it after the Bootstrap CSS in the project HTML.
html
<link href=”bootstrap.min.css” rel=”stylesheet”>
<link href=”custom.css” rel=”stylesheet”>
Use the same selector and change the desired properties. In this example, for example, if you want to change the color of the primary button, then write the following code:
btn-primary {
background-color: #FC7F66;
border-color: #FC7F66;
}
Make sure your selectors are specific enough to correctly override Bootstrap styles.
2. Using Sass Variables for Deeper Customization
Bootstrap is built with Sass. This allows you to change the default variables before recompiling the CSS file. This way, you can customize the theme, colors, sizes, and more thoroughly.
Download the Bootstrap source (not just the CSS file).
Edit the Sass variables file, such as _variables.scss, before importing Bootstrap.
Change the values of variables like $primary, $font-family-base, and so on.
Recompile Sass to CSS using a tool like sass or Laravel Mix
3. Removing Unnecessary Components
Want to reduce the size of your CSS and JavaScript files? Don’t worry, just choose the components that you really need. Import these specific parts using the modular version of Bootstrap.
Use the Bootstrap Customizer on the official Bootstrap website.
Select only the components that you need, then download the customized version.
Use the customizer’s CSS and JS files in your project
3. Creating Various Components with Bootstrap
Bootstrap provides various ready-to-use components that you can use right away. Let’s see how to use Bootstrap to create buttons, navbars, cards, and other important components easily!
Buttons
Buttons are one of the important components on a website. Usually, this button is used to increase the number of conversions in a business. With Bootstrap, you can create it in seconds.
Use the btn class as a base.
Add color variations such as btn-primary, btn-success, or btn-danger.
To customize the size, use the code btn-sm (small) or btn-lg (large).
Here is an example of the code:
To make the button inactive, you can use disabled. Also add an icon with Font Awesome if necessary.
Navigation (Navbar)
The navbar is very important for users to navigate your website. Luckily, Bootstrap provides an easy-to-use navbar component. Follow these steps:
Create a basic structure with navbar navbar-expand-lg.
Add a logo and menu using navbar-brand and nav-item.
Enable mobile mode with navbar-toggler.
Here is an example of the code:
To make this navbar always appear on top, use fixed-top. Also adjust the color with bg-dark or bg-primary.
Cards
You can use the card element to display concise content such as articles, products, or profiles. Here are the steps to create it:
Use the card class as a container.
Add card-body for the main content.
Insert an image with card-img-top.
Here is an example of code that you can use:
Forms
Forms are used to collect data from users. Luckily, Bootstrap can help you create forms with a consistent style. Follow these steps:
Use form-control for text input.
Add a label with form-label.
To add a checkbox or radio, use the form-check code.
Here is an example of code to create a simple form:
Modal (Popup Dialog)
The next element that you can create is a Modal or popup dialog. Usually, modals are used to display additional content without leaving the current page. Here are the steps in building a modal in Bootstrap:
Create a modal structure with modal-dialog.
Add a trigger button with data-bs-toggle=”modal”.
Set the content you want to create in the modal-body.
Here is an example of code that you can apply:
Use modal-lg for a larger size and add animation with fade.
Image Slider (Carousel)
The carousel element is used to display image slideshows or other content, such as promos. Here are the steps:
Use the carousel slide as a container.
Add an image with carousel-item.
Activate the control with carousel-control-prev/next.
The code example is as follows:
Grid System
Finally, you can also create a grid system. The grid system is used to organize the page layout responsively. To create a grid system, follow the steps below:
Use container or container-fluid as a container.
Divide the columns with row and col-md-6 (for example).
Here is an example of the code:
That’s a guide on how to use Bootstrap as needed. By understanding the use and creating elements in Bootstrap, you can build a responsive and attractive web interface.
However, to become a reliable web developer, you need to have a deeper understanding and consistent practice.
Why choose Mitra IT?
• Expert Team: We have a team of experienced and creative technology experts.
• Comprehensive Solutions: We not only provide technology but also offer full support to ensure your business success.
• Focused on Results: We are committed to helping you achieve your business goals.
Don’t miss the opportunity to maximize your business potential!
Contact us now for a free consultation.
