Known Participant

Answered

Styling a bootstrap element.

Forum|Forum|6 years ago
March 18, 2019
4 replies
1713 views

Hi People.

As you know, Bootstrap elements are locked so flippin flamboyants like me cant go and muck things up...

However, they are not styled very nicely....

I have been playing with the "NAVBAR" element which I REALLY want to use in a responsive site.

I love it that when the screen size drops, the "NAVBAR" switches to a drop-down menu thing...
But, it does not fit in with the colour scheme...

I have managed to learn how to re-style the actual portion that has the buttons, etc. etc.

But that leaves me with the background out of style...

I cannot seem to be able to add a CSS to change the colour of the background...

I have been in and had a look thru the code and found a bit that styled it as LIGHT, or DARK, etc. and O did change it to a DARK colour, but it still does not match the site.

If I cannot change the colour to match the background of the site, the alternative is to change the background of the site to match the NAVBAR....

NOT IDEAL !!!

I have attached a screenshot JPEG to give you a more visual idea.

Thank you all in advance.

Glen

This topic has been closed for replies.

Correct answer Nancy OShea

Replace your current Bootstrap CSS with a Bootswatch Theme. Currently, there are 21 color themes to choose from -- Cerulean to Yeti.

https://bootswatch.com/

This is a working code example using the Flatly theme from Bootsterap CDN.

https://www.bootstrapcdn.com/bootswatch/

To try other themes, simply replace the theme name on Line #9.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootswatch  Demo</title>
<!-- Bootswatch Flatly CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-T5jhQKMh96HMkXwqVMSjF3CmLcL1nT9//tCqu9By5XSdj7CwR0r+F3LTzUdfkkQf" crossorigin="anonymous">
<style>
/**styles for large devices**/
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
/**optional offset from top**/
top: 2%;
}
}
</style>
</head>
<body>
<nav id="topNav" class="navbar fixed-to navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="/">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>

Nancy OShea

Correct answer

Community Expert

Replace your current Bootstrap CSS with a Bootswatch Theme. Currently, there are 21 color themes to choose from -- Cerulean to Yeti.

https://bootswatch.com/

This is a working code example using the Flatly theme from Bootsterap CDN.

https://www.bootstrapcdn.com/bootswatch/

To try other themes, simply replace the theme name on Line #9.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootswatch  Demo</title>
<!-- Bootswatch Flatly CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-T5jhQKMh96HMkXwqVMSjF3CmLcL1nT9//tCqu9By5XSdj7CwR0r+F3LTzUdfkkQf" crossorigin="anonymous">
<style>
/**styles for large devices**/
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
/**optional offset from top**/
top: 2%;
}
}
</style>
</head>
<body>
<nav id="topNav" class="navbar fixed-to navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="/">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

If you don't really know much about code its probably best to find another editor if you want to use Bootstrap that does a better job at helping you address the problems of a really awful framework and its overly-complex approach which is aimed at skilled coding experts, not interns. Not something that Adobe really gave much consideration too when deciding to include it in their product.

To over-ride the Bootstrap default css you must link another custom css file to your page AFTER the link to the default Bootstrap css file. You should not attempt to edit the default Bootstrap css file unless you know what you are doing.

Below are the key css selectors you need to change the background color of the navbar, the 'active' state of the link and the links themselves:

Include these in your custom linked css stylesheet and change the colors to suit your color scheme.

/* navbar background color */

nav.navbar {

background-color: orange;

}

/* active link */

.navbar-nav .active .nav-link {

color: grey!important;

}

/* color of main links */

.navbar-nav .nav-link {