Sooooo. I anchored one of my buttons and it moved the button to the end of the group.
I think I placed it wrong.
Can you guys check it out? Line 11-13
btw do I have to anchor hrefs?
There are two things here you should fix.
- You wrapped a button in an anchor tag, which doesnât make sense. You should either use a button or an anchor tag, but not both combined.
- Buttons are used for forms (like submitting) or if you want to modify their behaviour with JavaScript (opening a modal for example).
- Anchor tags are for linking to other pages or sections within the same page.
Judging from your code, you might want to use an anchor tag instead of the button, because you want to link to a different section in your document.
By the way, this also applies for the other buttons in the navigation, you should switch to anchor tags.
- The button got moved to the right because you forgot to add the Bootstrap specific classes:
class="btn btn-primary"
Ideally, it should look like this:
<div id="button-group" class="btn-group btn-group-lg">
<a href="#about" type="button" class="btn btn-primary"><i class="fa fa-2x fa-info-circle"> About</i></a>
<a href="#projects" class="btn btn-primary"><i class="fa fa-2x fa-suitcase"> Projets</i></a>
<a href="#contact" type="button" class="btn btn-primary"><i class="fa fa-2x fa-id-card"> Contact</i></a>
<a href="#social" type="button" class="btn btn-primary"><i class="fa fa-2x fa-github-square"> </i> <i class="fa fa-2x fa-facebook-square"> </i> <i class="fa fa-2x fa-free-code-camp"></i></a>
</div>
-Anchors will only be words and wonât have that button look.
-I thought buttons were for actionable items, Iâll have to check that when I get out of work but thatâs what I read.
- And the documentation says btn-primary is only a color, I used btn-info instead.
Looking closer at the snippet you put up for meâŚIt looks like your using button stuff inside an anchor tagâŚ
Iâm gonna have to check that out tx @andre
In Bootstrap, it doesnât matter if you put the style .btn .btn-primary
on an anchor tag or a button, the visual outcome is almost the same. However, the use of either of these should be clear to avoid further problems.
Have a look at this thread in Stackoverflow: https://stackoverflow.com/questions/11899622/html-css-buttons-when-to-use-what
They basically explain the difference. In your case, you want to link to a different section in your document, so an anchor tag should be used. If you would like to submit a form or toggle some JavaScript action a button should be used.
Please explain what âproblemsâ your referring to, ty.
On a solved note, I think whatâs happening here is I may be using the wrong HTML element because I thought only < buttons> look like buttons.
tx for the help.
I refer to problems with SEO, as it is very important to use the correct HTML elements on your website to get the best SEO results.
Basically, you are right: without any CSS, a button element looks like a button and a link looks like a text element with underline and in blue. Thatâs the default browserâs style. But for things like this we have CSS to add all kind of styles and make our links look like buttons or vice-versa. Whatever your project requires
Welcome to the wonderful world of accessibility and semantic markup!
As you noted - Bootstrap, and also therefore CSS generally, can style pretty much anything to look like anything else:
So, as in this pic, you can make a <p>
or <h1>
look like a button.
Ever browser has some default styles built in (which we see in the <button>
above), but what I applied to the p and h1 was a couple of Bootstrap classes that are typically reserved to overwrite default buttons.
Thatâs all pretty cool - but just because you can do something with CSS, it doesnât mean you should!
The idea of semantic markup is that you should use the elements that say they will be used for the thing they actually do.
For example, a <h1>
element should only be used for top level headings. Even though itâs style is big and bold, you shouldnât use it just for style - it should convey the information âThis is a headingâ.
Anchors and buttons have slightly different purposes. Ask yourself what you expect to happen when you click a link, vs a buttonâŚyou probably assume that a link will take you to a new place, whereas a button will submit a form or trigger some sort of action.
If you want a link to look like a button for stylistic reasons, thatâs ok (but it may confuse your users, so be careful).
When it comes to accessibility, though, you want your markup to be as semantic as possible. You might like the look of a button for your thing that links you to another part of your page - but it should still be called an anchor. Screen readers present links and buttons (and navs, and headings, and everything else) in different ways. Also, web crawlers will treat them differently (think Google).
AnywayâŚitâs a bit of a rabbit hole, but if you want to learn more about accessibility, you could start with this article:
IT WORKS!!
HAHAHAHAHAHA
Aw man what a relief
-using anchor tags with the btn Bootstrap classes renders the visual aid I want for my links.
- Also I think I need to learn something about that SEO. I guess HTML is not only how Web Browsers render pages but also how SEOâs rank and find them (or the content within them).
Thanks so much for your help @andreasremdt.
Man, ppl kept saying âdonât use buttons in acnhorsâ but I had to get that look.
You taught me some super valuable stuff.
Thatâs so crazy!! Like in a way. Think about it guys, that means that the styling possiblities are endless because theyâre are (maybe all) interchangeable!
*give me a sec to go through the rest of your post
-I think thatâs a great point becasue I feel like semantic naming (@shout to @BenGitter for droppinâ some knowledge in that) is really all about how Browsers and devices render stuff. But then we can always override them andâŚwell now Iâm going down the rabbit hole lol.
Iâll try and read that link @JacksonBates tx man