Isolate-Bootstrap-4.1-CSS-Themes
Isolate-Bootstrap-4.1-CSS-Themes copied to clipboard
Published
20 hours ago •
cryptoapi
cryptoapi
Isolate Bootstrap CSS to a particular class 'bootstrapiso' to avoid css conflicts with your site css style
.
How to Isolate Bootstrap 4.4.1 CSS to Avoid Conflicts
Bootstrap is the most popular CSS framework on the web. It makes it incredibly easy to create beautiful, responsive designs that just work. However, it’s not always possible to use Bootstrap for your entire website. Often the website’s main CSS is outside of your control. You just need to use a portion of Bootstrap CSS.
Based on instruction - https://formden.com/blog/isolate-bootstrap (compile with LESS)
Usage
To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
And use any css style from folder css4.1 like so:
<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>
Done!
.
Empty Bootstrap4 page example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<title>Page1</title>
<!-- Isolated Bootstrap4.4.1 CSS - -->
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.12.0/js/all.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
</body>
</html>
.
.
Isolated Bootstrap 4.4.1 CSS Styles in folder css4.1
- bootstrapcustom.min.css - default bootstrap 4.4.1 isolated style, demo https://getbootstrap.com/docs/4.1/examples/pricing/
- cerulean.min.css - isolated css based on https://bootswatch.com/cerulean/
- darkly.min.css - isolated css https://bootswatch.com/darkly/
- flatly.min.css - isolated css https://bootswatch.com/flatly/
- litera.min.css - isolated css https://bootswatch.com/litera/
- lux.min.css - isolated css https://bootswatch.com/lux/
- minty.min.css - isolated css https://bootswatch.com/minty/
- pulse.min.css - isolated css https://bootswatch.com/pulse/
- sandstone.min.css - isolated css https://bootswatch.com/sandstone/
- sketchy.min.css - isolated css https://bootswatch.com/sketchy/
- solar.min.css - isolated css https://bootswatch.com/solar/
- superhero.min.css - isolated css https://bootswatch.com/superhero/
- united.min.css - isolated css https://bootswatch.com/united/
cryptoapi