What is Bootstrap ? Why use Bootstrap?, Container class and Tables
- Bootstrap is an open-source front-end framework that simplifies web development by providing a collection of pre-designed, responsive components and CSS classes.
- It helps you create visually appealing and mobile-friendly web applications with ease.
Why Use Bootstrap?
- Responsive Design: Bootstrap ensures your website looks great on various devices and screen sizes, from desktops to mobile phones.
- Consistency: It provides a consistent design language and user experience across your site.
- Faster Development: Bootstrap's ready-made components save development time.
- Customizability: You can customize Bootstrap to match your project's unique needs.
Getting Started with Bootstrap
To start using Bootstrap, follow these steps:
Linking with Bootstrap
Include the following code in the <head> section of your HTML file to link your project with Bootstrap's CSS and JavaScript:
Loading…
- This code links to the Bootstrap files hosted on a content delivery network (CDN), making them easily accessible.
- Now you can start using Bootstrap classes in your HTML.
Bootstrap's Core Concepts
Container Class
- The .container class is a fundamental Bootstrap component that wraps the content of your page.
- It ensures that the content is centered and provides padding to improve readability.
Loading…
Grid System
- Bootstrap's grid system allows you to create responsive layouts by dividing your page into rows and columns.
- Columns are defined using classes like .col-sm-4 (for small screens) or .col-lg-6 (for large screens). Example:ove readability.
Here's how to use it:
Loading…
Tables
You can easily style tables using Bootstrap. Apply the .table class to a <table> element and use other classes like .table-striped or .table-bordered for additional styles:
Loading…
Images
To make images responsive, add the .img-fluid class:
Loading…
Buttons
Bootstrap provides predefined button styles. Use classes like .btn, .btn-primary, or .btn-danger:
Loading…
Typography Classes
Bootstrap offers various typography classes to style text. For example, .h1 to .h6 for headings, .lead for larger text, and .text-muted for muted text:
Loading…
Jumbotron
A jumbotron is a large callout for showcasing content. Use the .jumbotron class:
Loading…
Glyphicons (Icons)
Bootstrap used to provide Glyphicons, but they are no longer included in newer versions. Consider using other icon libraries like Font Awesome for icons in your project.
Conclusion
These Bootstrap basics should give you a solid foundation for creating responsive and visually appealing web applications. Experiment with these components to build your web pages quickly and effectively.