Bootstrap 3.3.1 is impacting the font for complete page

Question

I am trying to add bootstrap for one particular div element to show the alert message but it is impacting the font for all other page element and the font is looking smaller. How to make the bootstrap call for just one div in the page?

<div class="bootstrap-test">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<i class="glyphicon glyphicon-warning-sign"></i>This is a warning alert.
</div>
</div>

See https://www.google.com/search?q=apply+css+to+one+div+site:stackoverflow.com&rlz=1C1ZCEB_enUS850US850&sxsrf=ALeKk00oNP2wu7NT9hC9uIFq3DiRopLRIw:1603122170738&sa=X&ved=2ahUKEwjmspK8_8DsAhXJKM0KHUT5CUQQrQIoBHoECAcQBQ&biw=1618&bih=947. — isherwood, Oct 19 '20 at 15:43
What isherwood is that it is duplicate question, and you should start by setting all your links to a `style` tag inot your `div`. — MaxiGui, Oct 19 '20 at 15:46
This question has been closed, but the link it points to as already being an answer is out of date and recommends a solution that would fail the W3 validator test. How do we get this question reopened? — A Haworth, Oct 20 '20 at 17:03

score 0 · Accepted Answer · answered Oct 19 '20 at 16:09

In this very specific case (as opposed to the more general 'how do I link a style sheet to just one element' questions which require more thought) if we look at the CSS in use:

bootstrap sets the font-family, font-size etc in body. If you don't like these then include in your own css something along these lines:

body{
  font-family: Myspecialfont, Helvetica, sans-serif
  font-size: 16px; /* or whatever you want the font size to be in the default case */
}

If you are worried about the alert looking how bootstrap wants it to look then you can set the font size and family for that specific use back to how it is in the bootstrap css:

.alert-warning {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

Bootstrap 3.3.1 is impacting the font for complete page

1 Answers1