Changing background color of bootstrap/css page - html

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,

Answer 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

Answer 2

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>;
}

Answer 3

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.