How can I change the bootstrap's well color?

Asked 6/2, 2014 at 22:58 Answered 5/2, 2017 at 10:9

Solved html css twitter-bootstrap background-color

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.

Cloudland answered 6/2, 2014 at 22:58 Comment(6)

And this isn't working? jsfiddle.net/sVQsg – Mayhap 6/2, 2014 at 23:1

No, I mean, I can change everything but the color. I think there's something wrong on my syntax or maybe that's not where the color should be changed. – Cloudland 6/2, 2014 at 23:3

I got it guys: <link href="Styles/bootstrap-theme.css" rel="stylesheet" type="text/css" /> Shouldn't be there. Thanks a lot. – Cloudland 6/2, 2014 at 23:8

I'm confused, but I'm glad you found something that helped. Just in case you are testing in an old version of IE there is a background-color bug to keep an eye out for: css-tricks.com/ie-background-rgb-bug – Mayhap 6/2, 2014 at 23:10

Thanks. I never heard about that, but I did what Micallef said (before he said it) and that's how I found out something was wrong. Thanks @JasonSperske – Cloudland 6/2, 2014 at 23:13

possible duplicate of twitter bootstrap - well background color – Weinberg 6/5, 2015 at 23:13

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.

Oxytocic answered 6/2, 2014 at 23:12 Comment(0)

Bootstrap 3 :

Set the background property and not the background-color.

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

Patricapatrice answered 24/11, 2014 at 18:18 Comment(4)

Thanks for this! Anyone happen to know what the default hex color for the well class is? – Weinberg 6/5, 2015 at 23:12

background-color : #f5f5f5 – Patricapatrice 8/5, 2015 at 0:45

@MattO'Brien Otherwise, there is a rgb() color picker online here. – Asomatous 16/10, 2015 at 17:45

I found this page that helped me choose the color I want. – Asomatous 21/1, 2016 at 19:15

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.

Oxytocic answered 6/2, 2014 at 23:12 Comment(0)

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

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

That worked for me.

Pyelitis answered 5/2, 2017 at 10:9 Comment(0)

-4

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>`

Calk answered 30/3, 2016 at 16:6 Comment(1)

While this will "fix" an issue, this defeats the purpose of CSS (Cascading Style Sheets). Not only this, but his problem is with CSS syntax, and not "div targetting" – Vella 30/3, 2016 at 16:10

Recommended topics

Hot tags