Changing background color of bootstrap/css page

Question

I am using a bootstrap template and I am a beginner. I want to change the backgroud blue color into a color of my choice. I also want to change the color of the button.

I tried playing around with CSS files, but i failed.

main.css :



/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
 font-family: Montserrat-Regular;
 src: url('../fonts/montserrat/Montserrat-Regular.ttf'); 
}

@font-face {
 font-family: Montserrat-ExtraBold;
 src: url('../fonts/montserrat/Montserrat-ExtraBold.ttf'); 
}

@font-face {
 font-family: Montserrat-Bold;
 src: url('../fonts/montserrat/Montserrat-Bold.ttf'); 
}


/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
   margin: 0px; 
   padding: 0px; 
   box-sizing: border-box;
}

body, html {
   height: 100%;
   font-family: Montserrat-Regular, sans-serif;
}

/*---------------------------------------------*/
a {
   font-family: Montserrat-Regular;
   font-size: 14px;
   line-height: 1.7;
   color: #666666;
   margin: 0px;
   transition: all 0.4s;
   -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
}

a:focus {
   outline: none !important;
}

a:hover {
   text-decoration: none;
 color: #fff;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
   margin: 0px;
}

p {
   font-family: Montserrat-Regular;
   font-size: 14px;
   line-height: 1.7;
   color: #666666;
   margin: 0px;
}

ul, li {
   margin: 0px;
   list-style-type: none;
}


/*---------------------------------------------*/
input {
   outline: none;
   border: none;
}

textarea {
 outline: none;
 border: none;
}

textarea:focus, input:focus {
 border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #999999; }
input:-moz-placeholder { color: #999999; }
input::-moz-placeholder { color: #999999; }
input:-ms-input-placeholder { color: #999999; }

textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }

/*---------------------------------------------*/
button {
   outline: none !important;
   border: none;
   background: transparent;
}

button:hover {
   cursor: pointer;
}

iframe {
   border: none !important;
}


/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
 font-family: Montserrat-Regular;
 font-size: 16px;
 color: #cccccc;
 line-height: 1.4;
}

.bo1 {
 border-bottom: 1px solid #999999;
}

.hov1:hover {
 border-color: #d33f8d;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
 width: 100%;
 margin: 0 auto;
}

.container-login100 {
 width: 100%;  
 min-height: 100vh;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 padding: 15px;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;

 position: relative;
 z-index: 1;
}

.container-login100::before {
 content: "";
 display: block;
 position: absolute;
 z-index: -1;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: #005bea;
 background: -webkit-linear-gradient(bottom, #005bea, #00c6fb);
 background: -o-linear-gradient(bottom, #005bea, #00c6fb);
 background: -moz-linear-gradient(bottom, #005bea, #00c6fb);
 background: linear-gradient(bottom, #005bea, #00c6fb);
 opacity: 0.9;
}

.wrap-login100 {
 width: 390px;
 background: transparent;
}



/*------------------------------------------------------------------
[  ]*/
.login100-form {
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.login100-form-title {
 font-family: Montserrat-ExtraBold;
 font-size: 24px;
 color: #fff;
 line-height: 1.2;
 text-align: center;

 width: 100%;
 display: block;
}

/*---------------------------------------------*/
.login100-form-avatar {
 width: 120px;
 height: 120px;
 border-radius: 50%;
 overflow: hidden;
 margin: 0 auto;
}
.login100-form-avatar img {
 width: 100%;
}


/*---------------------------------------------*/
.wrap-input100 {
 position: relative;
 width: 100%;
 z-index: 1;
}

.input100 {
 font-family: Montserrat-Bold;
 font-size: 15px;
 line-height: 1.2;
 color: #333333;

 display: block;
 width: 100%;
 background: #fff;
 height: 50px;
 border-radius: 25px;
 padding: 0 30px 0 53px;
}


/*------------------------------------------------------------------
[ Focus ]*/
.focus-input100 {
 display: block;
 position: absolute;
 border-radius: 25px;
 bottom: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 box-shadow: 0px 0px 0px 0px;
 color: rgba(0,91,234, 0.6);
}

.input100:focus + .focus-input100 {
 -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
 animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
 to {
   box-shadow: 0px 0px 80px 30px;
   opacity: 0;
 }
}

@keyframes anim-shadow {
 to {
   box-shadow: 0px 0px 80px 30px;
   opacity: 0;
 }
}

.symbol-input100 {
 font-size: 15px;
 color: #999999;

 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 position: absolute;
 border-radius: 25px;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding-left: 30px;
 pointer-events: none;

 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
}

.input100:focus + .focus-input100 + .symbol-input100 {
 color: #00c6fb;
 padding-left: 23px;
}


/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.login100-form-btn {
 font-family: Montserrat-Bold;
 font-size: 15px;
 line-height: 1.5;
 color: #e0e0e0;

 width: 100%;
 height: 50px;
 border-radius: 25px;
 background: #333333;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 0 25px;

 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;

 position: relative;
 z-index: 1;
}

.login100-form-btn::before {
 content: "";
 display: block;
 position: absolute;
 z-index: -1;
 width: 100%;
 height: 100%;
 border-radius: 25px;
 top: 0;
 left: 0;
 background: #005bea;
 background: -webkit-linear-gradient(left, #005bea, #00c6fb);
 background: -o-linear-gradient(left, #005bea, #00c6fb);
 background: -moz-linear-gradient(left, #005bea, #00c6fb);
 background: linear-gradient(left, #005bea, #00c6fb);
 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
 opacity: 0;
}

.login100-form-btn:hover {
 background: transparent;
 color: #fff;
}

.login100-form-btn:hover:before {
 opacity: 1;
}

/*------------------------------------------------------------------
[ Button sign in with ]*/
.btn-face,
.btn-google {
 font-family: Raleway-Bold;
 font-size: 16px;
 line-height: 1.2;

 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: center;
 align-items: center;
 width: calc((100% - 10px) / 2);
 height: 40px;
 border-radius: 3px;
 border: 1px solid #e6e6e6;
 background-color: #fff;

 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
}


.btn-face {
 color: #3b5998;
}

.btn-face i {
 font-size: 20px;
 margin-right: 10px;
 padding-bottom: 1px;
}

.btn-google {
 color: #555555;
}

.btn-google img {
 width: 19px;
 margin-right: 10px;
 padding-bottom: 1px;
}


.btn-face:hover,
.btn-google:hover {
 border-color: #d33f8d;
}



/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
 position: relative;
}

.alert-validate::before {
 content: attr(data-validate);
 position: absolute;
 max-width: 70%;
 background-color: white;
 border: 1px solid #c80000;
 border-radius: 14px;
 padding: 4px 25px 4px 10px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 right: 8px;
 pointer-events: none;

 font-family: Montserrat-Bold;
 color: #c80000;
 font-size: 13px;
 line-height: 1.4;
 text-align: left;

 visibility: hidden;
 opacity: 0;

 -webkit-transition: opacity 0.4s;
 -o-transition: opacity 0.4s;
 -moz-transition: opacity 0.4s;
 transition: opacity 0.4s;
}

.alert-validate::after {
 content: "\f06a";
 font-family: FontAwesome;
 display: block;
 position: absolute;
 color: #c80000;
 font-size: 15px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 right: 13px;
}

.alert-validate:hover:before {
 visibility: visible;
 opacity: 1;
}

@media (max-width: 992px) {
 .alert-validate::before {
   visibility: visible;
   opacity: 1;
 }
}

/*//////////////////////////////////////////////////////////////////
[ responsive ]*/

@media (max-width: 576px) {
 .wrap-login100 {
   padding-top: 80px;
   padding-left: 15px;
   padding-right: 15px;
 }
}

I also wanted to change the color of the button. I tried with no luck. In addition, I noticed that if there are two different shades of blue. The upper shade is lighter than the lower shade. I attached some screenshots. Please help me to change the background and button colors.

This is blue color in the upper section of the page,

This is the second blue shade in the lower part of the page,

Thank you Jithin B. I played with HTML element, and it worked. Thank you all for your answers :). — Asks
– Asks, Commented May 23, 2020 at 8:43

Julio Rodriguez · Accepted Answer · 2020-05-22 05:23:41Z

1

You can always override bootstrap defaults by adding an additional css, after bootrap and the theme's css. I use for example

.btn-primary {
        color: #fff;
        background-color: #007078;
        border-color: #92CDDC;
    }

Other bootstrap classes you may want to override for color consistency are all the *primary classes like .bg-primary, .table-primary, .table-primary > th, .table-primary > td, .badge-primary, .text-primary, a.text-primary:focus,a.text-primary:hover

Hope this helps you

answered May 22, 2020 at 5:23

Julio Rodriguez

114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asks Over a year ago

i tried playing around with btn, it worked. but not like what you mentioned. I managed to change the text... not the background, but I am still trying. Your suggestion was helpful

mohamed ibrahim · Accepted Answer · 2020-05-22 05:48:43Z

0

There are many background color classes provided by Bootstrap such as : bg-primary, bg-info, bg-success...etc. You can overwrite it in you CSS as follow :

.bg-info {
     background-color: <YourColor>;
}

answered May 22, 2020 at 5:48

mohamed ibrahim

5835 silver badges12 bronze badges

2 Comments

Asks Over a year ago

I found .bg-infom and I edited to the following: .bg-info { background-color: #ff0000; } but the color remained blue.

mohamed ibrahim Over a year ago

don't forget to add this new class to your html element

Wamala Emmanuel Nsubuga · Accepted Answer · 2020-05-22 05:27:29Z

0

For the background color, try adding the background color property to the body like this;

body, html {
    height: 100%;
    font-family: Montserrat-Regular, sans-serif;
    background-color: <color of choice>;
}

Add the same property to your button and add a color you want. Hope it works.

answered May 22, 2020 at 5:27

Wamala Emmanuel Nsubuga

1071 silver badge4 bronze badges

3 Comments

Asks Over a year ago

As an example, I did that: background-color: #666666; It did not work.

Asks Over a year ago

I also tried the following, background-color: #cc0000; the color is still blue... I am wondering, where can i find that particular property so that I change it..

user1348592 Over a year ago

I had to put !important on the background-color property for this to work.

Collectives™ on Stack Overflow

Changing background color of bootstrap/css page

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related