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.
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>
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.
Check this example using Bootstrap 4 and Material icons :
It seems that only the first button is correctly sized and its icon correctly aligned, plus the icons are all the same size.
I noticed that removing the following css code fixes it :
.btn-icon::after{
content: " " attr(title);
letter-spacing: -1rem;
opacity: 0;
transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
letter-spacing: normal;
opacity: 1;
}
But I need that effect. Why is this extra "ghost padding" being added on the right of the non-first buttons? And how can I fix this?
JsFiddle : https://jsfiddle.net/xpvt214o/136541/
Ok, so my previous answer had some strong points, but it wasn't correct.
I now have the correct answer for you. It's in the differences;
Your original jsFiddle;
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button> <!-- note the 0 space between button and i elements -->
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><!-- What's this? -->
</button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><!-- what's this? -->
</button>
This is because we are working with inline elements here. We are nesting something within the button elemenent, which means it behaves differently. In fact, it behaves differently in the sense that (and browsers don't all treat this the same, ie; Firefox creates spaces and Chrome does not) when you leave empty space within said elements. Usually you wouldn't notice, but because the :after creates content behind it, the whitespace is ineed rendered as whitespace (in firefox)
So, there are 2 ways to fix this issue;
The simple way; remove the whitespace from your code
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button>
Or the code-technically messy way but won't break if someone reformats your code so it's more stable and trustworthy way;
<button title="Button1" class="btn btn-outline-secondary btn-icon"><i class="material-icons">
file_download
</i><!-- These comments remove the effective html whitespace!!
--></button>
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><!-- Because you are commenting them out!
--></button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><!-- Amazing, isn't it?!
--></button>
This is why I prefer to use div elements and just style them as buttons, but that faces different issues. I just avoid these inline elements mostly because they get treated differently cross-browser a lot.
-- oh, and the JSFIDDLE of course!
Here is some more info on dealing with inline-block elements and their whitespaces!
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.
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!