Im using a bootstrap button:
<button type="button" class="btn btn-info navbar-btn navbar-right" id="logg">Sign in</button>
I cant change the color of the button by using background-color in css, the color remains the same.
However, Im able to change the border-color. Why am I not able to change the background color of the button?
I even had some problems with coloring a bootstrap navbar. I couldnt use border-color so I used background-image: linear-gradient(to bottom,someColorHere 0,anotherColorHere 100%);
Is there any other way to change the background color of bootstrap components?
I am currently working on a maven/web application with JSF framework on Netbeans.
As we had discussion, it seems that your optional CSS file is overriding the styles of the current Bootstrap CSS which is not letting you to place the button design.
Please put the optional CSS link before the Bootstarp CSS link in your web page. This will work in your case.
Related
I just started learning bootstrap and I am currently following a crash course video, and the developer did this
and I checked and there are like a finite set of colors like danger, warning, primary, and so on. I was wondering if I could use tomato red instead of dark.
You can use regular css to add custom colors, for example, in your html, you can create your own class:
<button type="submit" class="btn btn-tomato-red">My button</button>
Then in your css apply your custom styles to that class:
.btn-tomato-red {
background-color: #ff6347;
color: #ffffff
}
I'm trying to add a button to my site that initiates a visitor to opt into push web notifications, using push crew.
When you create the button with the service they give you the following code
<button onclick="_pcq.push(['triggerOptIn']);">
GET NOTIFICATIONS
</button>
Inside there are no options to alter the size, font or colors. I contact their support -> useless.
So the button created is dark grey which turns to light grey when you hover over and white text on both sides.
I have very limited web knowledge, but with googling i found a few codes <center> to center the button and a few other codes that work when you place it between <button and onclick such as width:150px; height:40px; to change the size of the button. But i'm still working out how to change the color. If i add color:red; it changes the text color which is OK. But if i add the code background-color: #FFFFC0; for example it blows out the button. It changes the color of the button but the button no longer works or changes color when hovering over.
The page builder i'm using has html but I don't have access to the CSS, so need a html workaround
I have tried using id's for each individual navbar options but the background color wont change only the text in the navbar changes.
My required outcome is to get a background color for each navbar option.(Note this is a bootstrap template I am editing). This is a link to my files with what I have tried so far.
You can add styling inline with html using style="background-color:blue;"
if you are using the bootstrap template then you can use the following classes
class="bg-primary" // to add blue background.
.bg-secondary // to add gray.
.bg-success // to add green etc.
to change the text use class="text-primary" and other classes.
check out more here(colors) and here (navbar).
I am a junior developer building my first web application for a client.
The owner is not content with the standard colours of the bootstrap buttons on the home.html.erb and wants a flamboyant colour of pink on one button particularly.
How do I style a twitter bootstrap button with hexadecimal colour using rails 4.2.4
What would the syntax be and what CSS folder from my below list would I use for such:
bootstrap_and_customization.css.scss,
home.css.scss,
pages.scss
You can just add it to the application.css|css.scss
So if you added a class of btn btn-pink to the button. I recommend that you add btn class so you will inherit the basic styling.
.btn-pink{
color: #FFFFFF; // whatever you want
background-color: ##FF69B4; // whatever you want
}
I have a button in my application and currently its very basic:
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.
Here is the JSFiddle:
http://jsfiddle.net/htzgak6g/1/
I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.
This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.
In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)
Look at a reset css to solve these problems and give a consistent blank slate across browsers.
The problem is that the browser appends default style to the elements which are marked by <system> in Firebug. You can use the Selectors style panel to view all the styles added.
As Toni said, you will need to use reset.css to ignore such styling. But for this specific problem, set the border-color to be transparent.
button {
border-color: transparent;
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Just add border-style:none; like so:
<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>
Here is your updated JSfiddle