I'm beginner with CSS and Boostrap.
I want to add button to the left side of my list, but it overlaps with the item below it when I set float:left. It overlaps with the following green item. I tried pull-left text-left class but they didn't work.
I hope Anyone can help me to fix it?
here is picture in my browser :
here is my html code:
body{
background:#f4f4f4;
}
#font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}
.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}
.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}
/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}
/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .create{
padding-top: 20px;
}
/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}
.breadcrumb a{
color:#333333;
}
.dash-box{
text-align:center;
}
#login{
margin-top:30px;
}
/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
.loginlink{
margin-top:10px;
padding-top:10px;
}
.linkcolorfont{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #555555;
}
img {
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 992px) {
.sort-right {
float: right!important;
}
}
.ltr {
direction: LTR;
}
.bg-green{
background-color: #5cb85c;
color: #fff;
}
.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
#addcredit{
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
<div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>
I would use a flexbox for .list-group-item and set the right margin for the button to auto. This also allows for easy and perfect vertical alignment.
body{
background:#f4f4f4;
}
#font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}
.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}
.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}
/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}
/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .create{
padding-top: 20px;
}
/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}
.breadcrumb a{
color:#333333;
}
.dash-box{
text-align:center;
}
#login{
margin-top:30px;
}
/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
.loginlink{
margin-top:10px;
padding-top:10px;
}
.linkcolorfont{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #555555;
}
img {
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 992px) {
.sort-right {
float: right!important;
}
}
.ltr {
direction: LTR;
}
.bg-green{
background-color: #5cb85c;
color: #fff;
}
.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.list-group-item {
display: flex !important;
justify-content: flex-start;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
<div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="margin-right: auto;"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>
You need to use overflow:hidden; inside that parent class
body{
background:#f4f4f4;
}
#font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}
.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}
.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}
/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}
/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .create{
padding-top: 20px;
}
/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}
.breadcrumb a{
color:#333333;
}
.dash-box{
text-align:center;
}
#login{
margin-top:30px;
}
/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
.loginlink{
margin-top:10px;
padding-top:10px;
}
.linkcolorfont{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #555555;
}
img {
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 992px) {
.sort-right {
float: right!important;
}
}
.ltr {
direction: LTR;
}
.bg-green{
background-color: #5cb85c;
color: #fff;
}
.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
#addcredit{
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
<div class="list-group-item" style="overflow:hidden;"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>
Maybe you can try tu use an absolute position on your button.
.btn {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: XXXX;
height: XXXX;
}
And so you have to use relative position on the parent
.list-group-item {
position: relative;
width: XXXX;
height: XXXX;
}
Please check this. i use .sort-right .list-group-item{float:left; width:100%;}.
body{
background:#f4f4f4;
}
#font-face {
font-family: 'Google';
src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
*{
font-family: Google, Arial, Helvetica, sans-serif;
direction: rtl;
}
/* Navbar */
.navbar{
min-height: 33px !important;
margin-bottom:0;
border-radius:0;
}
.navbar-nav > li > a, .navbar-brand{
padding-top:6px !important;
padding-bottom:0 !important;
height: 33px;
}
.navbar-default {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-default .navbar-toggle {
border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffbbbc;
}
/* Custom */
.main-color-bg{
background-color: #e74c3c !important;
border-color: #c0392b !important;
color:#ffffff !important;
}
/* Header */
#header{
background:#333333;
color:#ffffff;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .create{
padding-top: 20px;
}
/* Breadcrumb */
.breadcrumb{
background:#cccccc;
color:#333333;
}
.breadcrumb a{
color:#333333;
}
.dash-box{
text-align:center;
}
#login{
margin-top:30px;
}
/* Footer */
#footer{
background:#333333;
color:#ffffff;
text-align:center;
padding:30px;
margin-top:30px;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
.loginlink{
margin-top:10px;
padding-top:10px;
}
.linkcolorfont{
color: #000000;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #555555;
}
img {
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 992px) {
.sort-right {
float: right!important;
}
}
.ltr {
direction: LTR;
}
.bg-green{
background-color: #5cb85c;
color: #fff;
}
.run-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
#addcredit{
}
.sort-right .list-group-item{float:left; width:100%;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-3 sort-right">
<div class="list-group">
<div href="index.html" class="list-group-item active main-color-bg">اطلاعات > shikkhooneh</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال کنندگان : 2598</div>
<div class="list-group-item"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> دنبال شوندگان : 1420</div>
<div class="list-group-item"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span> اعتبار : 206<button class="btn btn-default" style="float:left"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
<div class="run-success list-group-item "><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> وضعیت : اجرا</div>
<div class="list-group-item"><small><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> اطلاعات درج شده ممکن است بروز نباشد.</small></div>
<div class="list-group-item"><button class="btn btn-default center-block"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> توقف</button></div>
</div>
</div>
Related
As you can see in the code below, when I resize window size, the image doesn't scale with it. I don't want to make the image distort when I resize the window. I want to make it so the image center is always in the middle of the window. Like on the phone I don't need to see the blue and red parts of the image just the center logo in middle and according to so with window resize until its full screen with full hero image in view. How do I do this? I can't really find any documentation with bootstrap.
input{
border: none;
border-bottom: 2px solid white;
}
::placeholder {
color: white
}
input[type=text] {
width: 36%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: transparent;
color: white !important;
}
input[type=text]:focus {
width: 50%;
background-color: transparent;
color: white !important;
}
.bg-primary {
background-color: #000000 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-nav .open .dropdown-menu {
color: white
}
.navbar {
background-color: #000000;
}
.navbar .navbar-brand {
color: #ffffff;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ededed;
}
.navbar .navbar-text {
color: #ffffff;
}
.navbar .navbar-text a {
color: #ededed;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ededed;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ededed;
}
.navbar .navbar-nav .dropdown-menu {
background-color: #000000;
border-color: #000000;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #000000;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ededed;
background-color: #000000;
}
.navbar .navbar-toggle {
border-color: #000000;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #000000;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ffffff;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ffffff;
}
.navbar .navbar-link {
color: #ffffff;
}
.navbar .navbar-link:hover {
color: #ededed;
}
#media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>(Insert Name) Reviews)</title>
<link rel="icon" type="image/png" sizes="100x100" href="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html"> <img alt="logo" src="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png" width="30" height="30"></a>
<input class="mr-auto" type="text" name="search" placeholder="Search...">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#collapse"
aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<img class="img-responsive" alt="background" src="https://i.imgur.com/I47YLUI.jpg" style="width:1536px;height:600px;">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
You can use img-fluid class on image tag that will scale the image as per devices and remove custom CSS on image
bootstrap - responsive-images
I am trying to create a navbar with a grid inside of it. I need to have the text appear on one line. As you can see from this screenshot, "Cryptocurrencies / Markets" and "Market Cap" and volume take up multiple lines. I want the text to only take up one line. See attached screenshot:
I've tried changing the col-sm-x classes but no luck. I can't get everything to line up on one line. Any suggestions? Thanks.
<html>
<head>
<title>#yield('meta_title') | #lang('constants.WEBSITE_NAME')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style type="text/css">
/* navbar */
.navbar-default {
background-color: #337ab7;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
.navbar-top {
padding-left:150px;
font-size:10px;
}
</style>
</head>
<body>
<nav class="navbar mobile navbar-default visible-xs">
<div class="navbar-header navbar-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="color:#fff"><strong>Cryptocurrencies</strong> 1000 / Markets 1000</div>
<div class="col-sm-5" style="color:#fff">
<strong>Market Cap</strong>:$263,920,404,123 <strong>24h Vol</strong>:$15,360,994,812
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-info btn-sm">Submit ICO</button>
<button type="button" class="btn btn-info btn-sm">Login</button>
</div>
</div>
</div>
</div>
</nav>
</body>
<html>
You may also want to include a width and margin on that div...
.navbar-top {
padding-left: 150px;
font-size: 10px;
white-space: nowrap;
width: 92%;
margin: 0 auto;
}
And on your .row div add align-items-center
<div class="row align-items-center">
...
</div>
I am trying to create a small Sinatra app. Currently, trying to set up a conditional navigation bar with the help of bootstrap. I am trying to use navbar-right to show sign up/ login/ logout links on the right side but it's not working correctly. It just shows everything on left. My code for navbar looks like below..
Coding Tips
<!-- Collect the nav links, forms, and other content for toggling -->
<div >
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav">
<% if logged_in? %>
<li>
User's tips
</li>
<li>
New Tip
</li>
<li>
Sign out
</li>
<% else %>
<li>
Sign Up
</li>
<li>
Sign In
</li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I also added style.css to custom style my navbar, which looks like below..
./*///// NAVBAR ////*/
/* while header */
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ }
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; }
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;}
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px; }
.navbar-default .nav > li > a:focus { color: #FF0000; }
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; }
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; }
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;}
.navbar-default .affix { background-color: #111111; }
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .affix .nav > li.active > a { color: #FF0000; }
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; }
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; }
Any suggestion to solve this problem?
Add a pull-right to your ul should fix it:
pull-right class you can find the source here:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css#L6519-L6524
.
/*///// NAVBAR ////*/
/* while header */
.navbar-default {
background-color: #111111;
border-color: transparent;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 300;
letter-spacing: 1px;
font-size: 5em;
/* while fixed */
}
.navbar-default .navbar-header .navbar-brand {
font-family: 'Arial', 'sans-serif';
font-size: 1em;
color: #31002e;
font-weight: 200;
text-transform: uppercase;
padding: 20px 25px;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #FF0000;
}
.navbar-default .navbar-header .navbar-toggle {
font-family: 'Arial', 'sans-serif';
font-size: 1em;
color: #31002e;
font-weight: 200;
text-transform: uppercase;
padding: 20px 25px;
}
.navbar-default .nav > li > a {
font-family: 'Arial', 'sans-serif';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
font-weight: 200;
color: #31002e;
padding: 20px 25px;
}
.navbar-default .nav > li > a:focus {
color: #FF0000;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #FF0000;
}
.navbar-default .nav > li.active > a {
color: #FF0000;
background-color: #111111;
}
.navbar-default .nav > li.active > a:focus {
color: #FF0000;
background-color: #111111;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: #111111;
}
.navbar-default .nav > li > a.selected {
color: #fff;
background-color: black;
}
.navbar-default .affix {
background-color: #111111;
}
.navbar-default .affix .navbar-header .navbar-brand:hover,
.navbar-default .affix .navbar-header .navbar-brand:focus {
color: #FF0000;
}
.navbar-default .affix .nav > li.active > a {
color: #FF0000;
}
.navbar-default .affix .nav > li.active > a:focus {
color: #FF0000;
}
.navbar-default .affix .nav > li > a:hover,
.navbar-default .affix .nav > li > a:active,
.navbar-default .affix .nav > li > a:focus,
.navbar-default .affix .nav > li > a:focus:hover {
color: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Collect the nav links, forms, and other content for toggling -->
<div>
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav pull-right">
<% if logged_in? %>
<li>
User's tips
</li>
<li>
New Tip
</li>
<li>
Sign out
</li>
<% else %>
<li>
Sign Up
</li>
<li>
Sign In
</li>
<% end %>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm trying to remove the gap between the Navbar and the Carousel.
However I can't for the life of me work out which element is causing the gap and how to fix it.
/* CSS used here will be applied after bootstrap.css */
.navbar {
margin: 0; /*add this*/
padding: 0px;
}
.navbar-default {
background-color: #ffffff;
}
/* title */
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #808080;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #808080;
}
/* active link */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #ff0000;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
.container {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Progression</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Physio</li>
<li>Massage</li>
<li>Beauty</li>
<li>First Aid</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container">
<div class="row">
<div class="col-sm-12>
<div id=" my-slider"="" data-ride="carousel">
<!-- indicators dot nav -->
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="Physio Massage Val d'Isere">
<div class="carousel-caption">
<h2>Massage</h2>
<h4>Relaxation to Deep Tissue</h4>
</div><!-- end carousel caption -->
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="Beauty Treatments Nails Facials & Waxing Val d'Isere">
<div class="carousel-caption">
<h2>Beauty</h2>
<h4>Nails - Facials - Waxing</h4>
</div>
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="Physiotherapy Assesment Treatment Rehab Val d'Isere">
<div class="carousel-caption">
<h2>Physiotherapy</h2>
<h4>Assesment Treatment Rehab</h4>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.bootply.com/jbTugk4aPV
Actually that's not a 1 pixel gap it a border in css names navbar.less line no. 15.
Here is your css
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Remember its your css file code not mile the border in it creating that gap you can override this by typing another css in your file.
.navbar{
border:none!important;
}
Or you can simply set the border-width to 0px in
.navbar-static-top {
z-index: 1000;
border-width: 0px;
}
to remove the 1px white navbar border.
i want to change my bootstrap nav bar color. I used TWBSColor to make a custom color. This is what i want:
.navbar-default {
background-color: #ffd2d2;
border-color: #000000;
}
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-link {
color: #000000;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
}
And this is what it is:
html,
body {
height: 100%;
}
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:991px) {
.customer-img,
.img-related {
margin-bottom: 30px;
}
}
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
.navbar-default {
background-color: #ffd2d2;
border-color: #000000;
}
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-link {
color: #000000;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
}
But i dont know how to add it ;( please help...
If all you want to do is just customize the navbar background color, the easiest way is just open the Bootstrap Customizer and change these two variables to suit your taste. The first one is for default and second is for inverse navbar variety.
#navbar-default-bg
#navbar-inverse-bg
Of course, whenever you upgrade to the next version of bootstrap, you have to remember this and make the proper variable change before downloading.
The second usual option is to install jekyll, node, grunt and other bootstrap dependencies and build bootstrap yourself by changing variables.less, but this method is an overkill if all you need is to customize background color. However, details about this second way is also provided in the Bootstrap Customizer page.