How can I change the bootstrap's well color?

StackOverflow https://stackoverflow.com/questions/21615913

Question

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.

Was it helpful?

Solution 2

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.

OTHER TIPS

Bootstrap 3 :

Set the background property and not the background-color.

.well {
    background: rgb(22, 105, 173);
}

You can also use !important in your default CSS to override the well background color:

.well{
background-color: cyan !important;
}

That worked for me.

You can just add a style within the div where you declared your well.

Your code:

<div class="well well-lg"><h1 class=""> TIDE File Generation</h1></div>

Suggested code:

<div class="well well-lg" style="background-color: (color of choice);">
    <h1 class=""> TIDE File Generation</h1>
</div>`
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top