Bootstrap Tutorials
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Nowadays, the websites are perfect for all the browsers (IE, Firefox and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). All thanks to Bootstrap developers – Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project.
Why Bootstrap?
- Faster and Easier Web-Development.
- It creates Platform-independent web-pages.
- It creates Responsive Web-pages.
- It designed to be responsive to mobile devices too.
- It is Free! Available on www.getbootstrap.com
How to use Bootstrap 4 in webpage: There are two ways to include Bootstrap in the website.
- Include Bootstrap from CDN link:
Example:<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <!-- Bootstrap CSS library --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- jQuery library --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- JS library --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity= "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <!-- Latest compiled JavaScript library --> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity= "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </div> </body> </html>
Output:
- Download Bootstrap from getbootstrap.com and use it:
- Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
- A.zip file would get downloaded. Extract it and go in the distribution folder. It contains two folders named as CSS and JS.
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
<script src=”js/bootstrap.min.js”> </script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>
</script> - Add the file link to the HTML document and then open the web page using web browsers.
Example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </div> </body> </html>
Output:
- Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
Learn Basic Bootstrap step by step:
- BootStrap (Part-1) | Introduction and Installation
- BootStrap (Part-2) | Grid System
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- Bootstrap (Part-8) | Badges, Labels, Page Headers
- Bootstrap (Part-9) | Tooltips
Bootstrap 4:
- Bootstrap 4 | Introduction
- Bootstrap 4 | Grid Basics
- Bootstrap 4 | Typography
- Bootstrap 4 | Colors
- Bootstrap 4 | Tables
- Bootstrap 4 | Images
- Bootstrap 4 | Jumbotron
- Bootstrap 4 | Alerts
- Bootstrap 4 | Buttons
- Bootstrap 4 | Button Groups
- Bootstrap 4 | Badges
- Bootstrap 4 | Progress Bar
- Bootstrap 4 | Spinners
- Bootstrap 4 | Scrollspy
- Bootstrap 4 | List Groups
- Bootstrap 4 | Cards
- Bootstrap 4 | Dropdowns
- Bootstrap 4 | Navs
- Bootstrap 4 | Navigation Bar
- Bootstrap 4 | Forms
- Bootstrap 4 | Custom Forms
- Bootstrap 4 | Input Groups
- Bootstrap 4 | Toast
- Bootstrap 4 | Carousel
- Bootstrap 4 | Flex
- Bootstrap 4 | Tooltip
- Bootstrap 4 | Popover
- Bootstrap 4 | Media Objects
Basic Bootstrap related articles:
- Typography in Bootstrap
- Colors and gradients in bootstrap with examples
- Bootstrap | Tables | Set-1
- Bootstrap | Tables | Set-2
- Responsive images in Bootstrap with Examples
- Bootstrap Buttons with Examples
- Bootstrap | Badges and Breadcrumbs
- Bootstrap | Spinners Set-1
- Bootstrap | Spinners Set-2
- List group in bootstrap with examples
- Bootstrap | Cards
- Bootstrap | Navigation Bar
- Bootstrap | Carousel
- Popovers in bootstrap with examples
- Bootstrap | Scrollspy
- Flexbox utilities in bootstrap with examples
- Media Objects in Bootstrap with Examples
Miscellaneous Articles:
If you like GeeksforGeeks and would like to contribute, you can also write an article and mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above