I see some of the frameworks doing this but it seems to me it is the default. Has anyone any experience with anything other than the default or do they know why it is specified?
Most frameworks let you set their button classes not to button elements only, but other elements like a, div, span etc.
The below illustrates it by using bootstrap btn class name (1)
JS Fiddle
.btn{ margin:5px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn btn-primary">This is a div</div><hr>
<a class="btn btn-success"> this is an anchor</a><hr>
<button class="btn btn-warning">Finally, a button</button>
(1) Same thing for Foundation button class and Pure.css pure-button class.
Related
I am using bootstrap and CSS to style my website but I can't seem to figure out how to change the font style and weight of the text within my buttons. Here is some of my code
<button type="button-apple" class="btn btn-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
I would like to change the font to be bolder so the words are easier to read because on my screen they come out as very thin lines.
Thanks in advance.
Whenever you try to work into libraries, please keep in mind that, you are overriding the style they already defined. In that case, just defining new styles such as color, font-weight etc. will not work. And also, please don't try to modify the class names they are already using.
You Can solve it in several ways
First Method is to add a new class from your own example: here -> .my-button-class and try to do
the styling. Then use !important with that, it will override the
style you want.
For Example
Your HTML will be as follow:
<button type="button-apple" class="btn btn-light btn-lg download-button my-button-class">
<i class="fab fa-google-play"></i> Download
</button>
CSS for the first method
.my-button-class{
font-weight: bolder !important;
font-size: 2rem !important;
color: blue !important;
};
Second Method using specificity which is calling a class inside of a tag for example: button.my-button-class to style it instead of using !important, that's also a very good solution.
CSS for the second method
button.my-button-class{
font-weight: bolder;
font-size: 2rem;
color: blue;
};
Hope it will solve your problem. :)
Thanks
You can wrap your button text in an anchor and then use a span item:
<a href="#" class="btn btn-light btn-lg download-button">
<i class="fab fa-google-play"></i>
<span style="font-weight:bolder;">Download</span>
</a>
I am using VMware clarity for UI and wants to reduce this spacing on left and right side of buttons i.e PDF button, ZIP button. I tried making padding as 0, and even negative padding but its not working.
Below is the code:
<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
<clr-icon class="is-solid" shape="file"></clr-icon>PDF
</button>
Can someone tell me how can I do this.
It seems that your elements are displayed according to flex behavior.
First you should take your dev tool to find where the styles about button.btn.btn-sm element are implemented. If you cannot change that, you can try to override it with important property by adding in the page/element/view your css code like this :
button.btn.btn-sm{
display:inline-block!important;
flex:none!important;// this will break the flex behavior
padding:0!important;
width:auto;
}
<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
<clr-icon class="is-solid" shape="file"></clr-icon>PDF
</button>
There is a comprehensive example of bootstrap button on the official website, but I can't figure out why there is a spacing between the buttons and how to do the same?
Any browser debug tool does not show anything: there are some top and bottom margins but nothing about horizontal spacing! Can anyone explain?
https://getbootstrap.com/docs/4.3/components/buttons/
Just add in your styles something like :
button.btn {
margin: 0 1px;
}
But be sure that it doesn't impact other styles that you wrote before
Since you are using bootstrap 4, you could also add the class "mr-1" to your buttons; that way you don't have to change the css (unless you want to :) ).
This is due to their reboot stylesheet which styles the documentation you are looking at.
If you pull up a google element inspector their is actually a total of 2 maring and 6px padding on the left and right side of the buttons. This will not apply to the buttons that you use in your templates.
The spacing you are describing is what happens when you have multiple display:inline-block elements with the code that creates them each on their own line.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p>These buttons will appear with spacing between them.</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<hr />
<p>These buttons will not.</p>
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button>
There are any number of ways to add the spacing manually using the .m-*-* utility class or other custom CSS. Or you can simply output your HTML with each button on a new line.
I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
First post here. I'm trying to override the link colors for Bootstrap buttons, but I can't get it to work. I actually got the background color to change, but I can't get the link colors to change. I also can't figure out how to space the buttons out more.
<span>
<button type="button" class="btn btn-default btn-lg">Resume</button>
<button type="button" class="btn btn-default btn-lg"> Twitter</button>
<button type="button" class="btn btn-default btn-lg">LinkedIn</button>
</span>
My css currently looks like:
.btn{
background-color:#d0d0d0;
text-align:center;
display:block;
}
To change the text colour of the BootStrap buttons, you'll actually have to target the <a> element inside of the .btn. For example:
.btn a{
color:#000;
}
This would change button link text to black. Hope this helped, let me know if you have any questions!