Apply Bootstrap style to only a div

Question

I wanna apply this style <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> only to a div without affecting the entire website style, is it possible? Here is the div:

<div class="nav-scroller py-1 mb-2">

    <nav class="nav d-flex justify-content-between">

        <a class="p-2 text-muted" href="#">Menu 1</a>
        <a class="p-2 text-muted" href="#">Menu 2</a>
        <a class="p-2 text-muted" href="#">Menu 3</a>

    </nav>
</div>

Answer 1

Here's what you're looking for:

.a {
  padding-bottom: .25rem;
  padding-top: .25rem;
  margin-bottom: .5rem;
}

.b {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.c {
  color: #6c757d;
  padding: .5rem;
  text-decoration: none;
  background-color: transparent;
}

<div class="a">
  <nav class="b">
    <a class="c" href="#">Menu 1</a>
    <a class="c" href="#">Menu 2</a>
    <a class="c" href="#">Menu 3</a>
  </nav>
</div>

Obviously, .a, .b and .c are generic. Change them to whatever you want.

Note the above snippet only applies the actual properties specified by those bootstrap classes, and nothing more. I also haven't used !important, as it didn't seem necessary in your case. If you need any of the Bootstrap's reboot.css rules applied to your elements, you should wrap the entire element into a wrapper with a specific class (.bs for example) and handpick the reset rules from this file.

To apply all of them, wrap your element into a <div class="bs"></div> wrapper and use this CSS:

.bs *,
.bs *::before,
.bs *::after {
  box-sizing: border-box
}

.bs html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.bs article,
.bs aside,
.bs figcaption,
.bs figure,
.bs footer,
.bs header,
.bs hgroup,
.bs main,
.bs nav,
.bs section {
  display: block
}

.bs body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff
}

.bs [tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important
}

.bs hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

.bs h1,
.bs h2,
.bs h3,
.bs h4,
.bs h5,
.bs h6 {
  margin-top: 0;
  margin-bottom: 0.5rem
}

.bs p {
  margin-top: 0;
  margin-bottom: 1rem
}

.bs abbr[title],
.bs abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none
}

.bs address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit
}

.bs ol,
.bs ul,
.bs dl {
  margin-top: 0;
  margin-bottom: 1rem
}

.bs ol ol,
.bs ul ul,
.bs ol ul,
.bs ul ol {
  margin-bottom: 0
}

.bs dt {
  font-weight: 700
}

.bs dd {
  margin-bottom: .5rem;
  margin-left: 0
}

.bs blockquote {
  margin: 0 0 1rem
}

.bs b,
.bs strong {
  font-weight: bolder
}

.bs small {
  font-size: 80%
}

.bs sub,
.bs sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

.bs sub {
  bottom: -.25em
}

.bs sup {
  top: -.5em
}

.bs a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent
}

.bs a:hover {
  color: #0056b3;
  text-decoration: underline
}

.bs a:not([href]) {
  color: inherit;
  text-decoration: none
}

.bs a:not([href]):hover {
  color: inherit;
  text-decoration: none
}

.bs pre,
.bs code,
.bs kbd,
.bs samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em
}

.bs pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar
}

.bs figure {
  margin: 0 0 1rem
}

.bs img {
  vertical-align: middle;
  border-style: none
}

.bs svg {
  overflow: hidden;
  vertical-align: middle
}

.bs table {
  border-collapse: collapse
}

.bs caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom
}

.bs th {
  text-align: inherit
}

.bs label {
  display: inline-block;
  margin-bottom: 0.5rem
}

.bs button {
  border-radius: 0
}

.bs button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color
}

.bs input,
.bs button,
.bs select,
.bs optgroup,
.bs textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

.bs button,
.bs input {
  overflow: visible
}

.bs button,
.bs select {
  text-transform: none
}

.bs [role="button"] {
  cursor: pointer
}

.bs select {
  word-wrap: normal
}

.bs button,
.bs [type="button"],
.bs [type="reset"],
.bs [type="submit"] {
  -webkit-appearance: button
}

.bs button:not(:disabled),
.bs [type="button"]:not(:disabled),
.bs [type="reset"]:not(:disabled),
.bs [type="submit"]:not(:disabled) {
  cursor: pointer
}

.bs button::-moz-focus-inner,
.bs [type="button"]::-moz-focus-inner,
.bs [type="reset"]::-moz-focus-inner,
.bs [type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none
}

.bs input[type="radio"],
.bs input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0
}

.bs textarea {
  overflow: auto;
  resize: vertical
}

.bs fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0
}

.bs legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal
}

.bs progress {
  vertical-align: baseline
}

.bs [type="number"]::-webkit-inner-spin-button,
.bs [type="number"]::-webkit-outer-spin-button {
  height: auto
}

.bs [type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none
}

.bs [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

.bs ::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}

.bs output {
  display: inline-block
}

.bs summary {
  display: list-item;
  cursor: pointer
}

.bs template {
  display: none
}

.bs [hidden] {
  display: none !important
}