Does bootstrap css conflict?

Bootstrap is the most popular CSS framework on the Web. It makes creating beautiful, responsive designs very easy. However, sometimes you don't want to use Bootstrap on the entire website and you only need to use a part of the Bootstrap CSS. If you just add Bootstrap CSS directly to the head, it may conflict with other CSS, resulting in confusing styles.

#If we can isolate Bootstrap CSS to a specific class, the problem is solved! Just use LESS to add a class name to all Bootstrap CSS.

LESS is a CSS processor that allows you to change variables before compiling to CSS. This allows you to change one variable (e.g. base font size) and LESS will automatically adjust all styles that depend on it (e.g. line height, headings, etc.).

The following shows how to use LESS to customize bootstrap CSS, and then use the class bootstrap-iso to add prefixes to all Bootstrap styles.

Related recommendations: "bootstrap Getting Started Tutorial"

Processing steps:

1. Import the bootstrap css file in the head tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Replace

with

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

2. Then wrap the HTML in a div with class bootstrap-iso like this:

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

The above is the detailed content of Does bootstrap css conflict?. For more information, please follow other related articles on the PHP Chinese website!