Responsive Web Design-Frameworks

Responsive Web Design - Frameworks

There are many online frameworks available

Framework is a free responsive web designs that we can use to modify our web page without much efforts -

With a CSS framework, the user has a completed CSS stylesheet.

The framework already has classes built-in for common website elements – footer, slider, navigation bar, hamburger menu, column-based layouts, etc.

Top 6 CSS Frameworks for Website Developers and Designers -

1. Bootstrap

2. W3C frameworks

3. Tailwind CSS

4. Foundation

5. Bulma

6. Skeleton

Now we will just see Example -

1. Bootstrap

To link bootstrap to your page paste the following code in your head section.

Only then bootstrap will work

Now we will see example of a bootstrap framework

Example –Adding bootstrap buttons -

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

</body>
</html>

Output -

The above image shows an example bootstrap framework.