How can I change the bootstrap's well color?
90,518
Solution 1
That should work.
Try and inspect the element in Chrome to determine if some other css is overwriting the background-color. By default .well already contains a background-color - make sure you are replacing this.
Solution 2
Bootstrap 3 :
Set the background property and not the background-color.
.well {
background: rgb(22, 105, 173);
}
Solution 3
You can also use !important in your default CSS to override the well background color:
.well{
background-color: cyan !important;
}
That worked for me.
Author by
j.rmz87
Updated on July 09, 2022Comments
-
j.rmz87 almost 2 years
Well I've been trying to change bootstrap's well color, but it doesn't work, I've tried setting an image as background (the well's) and it worked, but that's not what I need. This is my HTML code:
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Default.aspx </title> <script src="Scripts/jquery-1.11.0.js" type="text/javascript"></script> <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="Styles/bootstrap-theme.css" rel="stylesheet" type="text/css" /> <link href="Styles/Default.css" rel="stylesheet" type="text/css" /> <script src="Scripts/bootstrap.js" type="text/javascript"></script> <script src="Scripts/Default.js" type="text/javascript"></script> </head> <body> <div class="well well-lg"><h1 class="">TIDE File Generation</h1></div> <div id="mainNavigator"> <ul class="nav nav-tabs"> <li><a href="/TideFileGeneration.aspx">Validate file</a></li> <li><a href="/ImportCatalogs.aspx">Catalogs</a></li> <li><a href="/InvoiceHistory.aspx">View History</a></li> <li><a href="/Reports.aspx">Reports</a></li> </ul> </div> </body> </html>And this is my CSS code:
.well{ background-color: rgb(22, 105, 173); }Is in the file Default.css
Thank you and regards.