Highlighted

Styling a bootstrap element.

Explorer ,
Mar 17, 2019

Copy link to clipboard

Copied

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.

GlenPhotoDraw-SS-01.jpg

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

687

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Styling a bootstrap element.

Explorer ,
Mar 17, 2019

Copy link to clipboard

Copied

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.

GlenPhotoDraw-SS-01.jpg

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

688

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 17, 2019 0
Adobe Community Professional ,
Mar 17, 2019

Copy link to clipboard

Copied

Have a look at Codeply or Google the subject.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2019 0
Participant ,
Mar 18, 2019

Copy link to clipboard

Copied

I find it easier to style it in Wappler than in Dreamweaver, at least Wappler has a real (usable) CSS Designer

design_color.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 1
LEGEND ,
Mar 18, 2019

Copy link to clipboard

Copied

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 {

color: white!important;

}

/* color of main links on hover */

.navbar-nav .nav-link:hover {

color: green!important;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 1
Explorer ,
Mar 18, 2019

Copy link to clipboard

Copied

Thank you osgood.

I will give this a try.

Glen

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 0
Adobe Community Professional ,
Mar 18, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 1