Difference Between CSS and Bootstrap

Last Updated : 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 CSS
Internal CSS
External CSS

Example: This example describes the use of simple CSS properties.

html

<!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:

html

<!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:

Cascading Style Sheet(CSS)	Bootstrap
CSS is developed by Hakon Wium Lie, Bert Bos, World Wide Web 17 December 1996.	Bootstrap is developed by Mark Otto, Jacob Thornton 19 August 2011.
CSS represent the style and the appearance of content like font, color, margin, padding, etc.	Bootstrap is a free and open-source CSS Framework that is used for developing responsive website.
CSS does not have a grid system.	Bootstrap is based on-grid system.
It currently working on CSS3 which is the latest version of CSS.	Bootstrap currently working on Bootstrap 5 which is the latest version of Bootstrap.
CSS does not provide responsive pages or website.	In Bootstrap we can design a responsive website or webpages.
CSS is more complex than Bootstrap because there is no pre-defined class and design.	Bootstrap is easy to understand and it has much pre-design class.
In CSS, we have to write code from scratch.	In Bootstrap, we can add pre-defined class into the code without writing code.

Difference Between CSS and Bootstrap

ayushjoshi599

Improve

Article Tags :

Difference Between CSS and Bootstrap

Similar Reads

Thank You!

What kind of Experience do you want to share?