Difference Between CSS and Bootstrap - GeeksforGeeks

14 Feb, 2022
Cascading Style Sheet(CSS): CSS is developed by Hakon Wium, Bert Bos, World Wide Web 17 December 1996. It is a language used to describes how HTML elements are to be displayed on a web page or layout of HTML documents like fonts, color, margin, padding, Height, Width, Background images, etc. CSS stands for Cascading Style Sheet, here Cascading refers to Section in which we apply Style procedure, and Style refers to color, Margin, font for table paragraphs, and Heading, etc. Sheet refers to how web pages look. In CSS we can change the look and layout of webpages by editing a single CSS file.
There are three types of CSS.
Inline CSSInternal CSSExternal CSS
Inline CSS
Internal CSS
External CSS
Example: This example describes the use of simple CSS properties.
<!DOCTYPE html><html>  <head>    <style>        p {            color: red;            text-align: center;        }    </style></head>  <body>    <p>Geeksforgeeks</p>    <p>        A Computer Science         portal for Geeks    </p></body>  </html>
Output:
Bootstrap: Bootstrap is the most popular open-source front-end framework. It is developed by Mark Otto, Jacob Thornton 19 August 2011. Bootstrap is a collection of CSS classes and JavaScript function and it is used for responsive design and building responsive, mobile-first site and application. It generally works on a grid system for creating page layout with the help of rows and columns and it supports all browsers for creating responsive websites.
Example:
<!DOCTYPE html> <html lang="en">         <head>     <title>Bootstrap Color Example</title>           <meta charset="utf-8">           <meta name="viewport"           content="width=device-width,                   initial-scale=1">           <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">             <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>             <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">     </script>             <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">     </script> </head>     <body>     <div class="container">         <h2>Bootstrap Colors List</h2>         <ul>             <li class="text-muted">GeeksforGeeks</li>             <li class="text-primary">GeeksforGeeks</li>             <li class="text-success">GeeksforGeeks</li>             <li class="text-info">GeeksforGeeks</li>             <li class="text-warning">GeeksforGeeks class</li>             <li class="text-danger">GeeksforGeeks</li>             <li class="text-secondary">GeeksforGeeks</li>             <li class="text-white">GeeksforGeeks</li>             <li class="text-dark">GeeksforGeeks</li>                      </ul>     </div> </body>     </html> 
Output:
Difference between CSS and Bootstrap:
sv176734
Bootstrap-Misc
CSS-Misc
Bootstrap
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to change the background color of the active nav-item?
How to Use Bootstrap with React?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)