the 4 best CSS frameworks to create a responsive website

As you know, each framework has its advantages and disadvantages, you have to choose wich your own framework you will use for your projects after determining requirements & analysis, in other words, suit your needs, CSS frameworks are very incredible because they make your website very responsive and practical .

Criteria You Should Know Before Choosing a CSS Framework

TOP 4 Best CSS Frameworks in 2020

Bootstrap 4

Backed by Twitter, Bootstrap 4 is the most popular front-end framework for developing responsive, mobile projects on the web.

is a free front-end framework (HTML and CSS) for faster and easier web development.
is a collection of CSS classes and Javascript functions.
allows developing site with responsive designs.
offer bootstrap modal.
responsive designs allow your page work for computer, tablets and mobile phones.

Why use it.

Features of Boostrap.

Bootstrap Grid.

Boostrap table.

Responsive tables make tables are responsive, just instead put table .table-responsive right on the table.
added table header modifiers thead-default and thead-inverse.
added new classes for example .table-success .table-danger, .table-info

Bootstrap Images.

Responsive images: images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image.

Image thumbnails: You can use .img-thumbnail to give an image a rounded 1px border appearance.

Bootstrap Alerts.

Alerts provide feedback messages to user,Bootstrap offers differents classes specialy for alerts for example, .alert-primary,alert-secondary,alert-success,alert-danger,alert-warning,alert-info,alert-light,alert-dark .

These classes are available also for links.

Bootstrap Buttons.

Bootstrap allows different classes for custom button styles for actions in forms, dialogs and more with support for multiple sizes, states

Examples

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

Boostrap cards.

A card is a bordered box with some padding around content, it offers many options for headers, footers, content, colors,etc.

Bulma

Bulma is an open source CSS framework based on flexbox.

Features of Bulma.

Bulma grid is built with Flexbox for achieving flexible layout with same size columns.

Semantic UI

Semantic UI is a front end framework like Bootstrap and Bulma, Semantic UI offer components more interaction than Bootstrap, in addition, these components have richer behaviors and extensibility