Is it possible to only make the text in a Bootstrap button act like a link, instead of the whole button itself?

As I start learning HTML and CSS with the help of Bootstrap, I'm encountering an issue with button functionality. The text within the button is acting like a link, but the entire button should be clickable. I'm not sure if I need more than just the minified Bootstrap JavaScript file to resolve this.

In my HTML, I have added the line "$('.nav-tabs').button()" to my head along with the Bootstrap JavaScript file. Here is my code snippet. Any suggestions or advice on how to fix this issue would be greatly appreciated.

<div class="btn-toolbar">
    <div class="row-fluid">
        <div class="span2 offset2">
        <div class="btn btn-primary">
            <a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
                Profile
            </a>
        </div>
    </div>
    <div class="span2 offset.5">
        <div class="btn">
            <a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
                Writing
            </a>
        </div>
    </div>
    <div class="span2 offset.5">
        <div class="btn">
            <a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
                Music
            </a>
        </div>
    </div>
    <div class="span2 offset.5">
        <div class="btn">
            <a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
                Photography
            </a>
        </div>
    </div>
</div>
javascripthtmlcssbuttontwitter-bootstrap

Answer №1

take out the class="btn btn-primary" from the div element, and assign it to the a element

refer to

...it is recommended to apply these classes only to <a> and <button> elements for optimal display.

Answer №2

It appears that you are forgetting to add the class to the a tag. Try using something like this 

<a href="#" class="btn btn-primary">New button</a>
to create a button with the text "New button."

Another example is 

<a href="#" class="btn btn-primary btn-large">Big Button</a>

This will give you a large blue button.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing a JavaScript array to track the start of the week and

I am encountering a logic problem with determining the start of the week. Below is a snippet of the code: WeekStarts(WeekN) { let WeekBD = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sa ...

javascriptarrayslogic

The event calendar feature in Codeigniter seems to only display one item of content at a time

I am encountering an issue with the event calendar where only 1 result is being displayed even though I have multiple exams scheduled on the same day that need to be shown. My query is fetching all the exams scheduled for the same day, however, it is not ...

javascriptphpjqueryhtmlcodeigniter

Binding attributes in knockoutjs following an AJAX request

The objective Incorporate the attr binding of KnockoutJS following an AJAX call. The dilemma Check out the code snippet below: $.ajax({ url: "/Products/List?Output=JSON", dataType: "json", success: function (data) { $.each(data, fun ...

javascriptjqueryajaxknockout.js

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

retrieve information provided by the user

When a user inputs a date into #dateUserInput and clicks the button, I want the fetch function to retrieve the appropriate image for that date. However, an error occurs: VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at getimag ...

javascripthtml

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) { background-color: lightgrey; } <ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all"> <li class="tagit-new" style="box-shadow: none;"> <input ty ...

htmlcss

Navigate directly to a designated element in a React component without the need to scroll when clicking a link

When viewing a user's profile in React, clicking on an image currently scrolls to that specific image within the entire images page. However, I am looking to modify this behavior so that it navigates directly to the image element without any scrolling ...

javascriptreactjsnext.jsuser-profile

Setting a button next to an input field in Bootstrap 4: A step-by-step guide

I have a form group with a label and input field. My goal is to position the button next to the input field on the same line. Here's an example of my code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra ...

cssbootstrap-4

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

Ah, it seems I've encountered an error in my test project. The issue lies with Node JS not being able to locate the getStr function within the Another object. Allow me to share the code with you: test.js var Another = require('./another.js&apo ...

javascriptnode.jsrequire

e.target not functioning in Opera and Chrome browsers

After implementing a jQuery navigation bar with dropdown functionality, I encountered an issue where the dropdowns did not disappear when clicking outside of the navigation bar. Despite this glitch, the majority of the functionality is working correctly. ...

jqueryhtml

There are spaces on both edges of the banner

I'm facing an issue with my banner width when trying to make it expand across the page. Despite using width: 100%, it still has a gap of around 5px on either side. Any insights on why this might be happening? CSS .banner { width: 100%; height: 300px ...

css

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Sticky Bootstrap Navbar

I am trying to incorporate a Bootstrap 4 navbar into a div with a background image. My goal is for the navbar to become sticky at the top, resize, and change color as the user scrolls down the page. However, I've noticed that when I place the navbar w ...

htmlcsstwitter-bootstrapbootstrap-4

Acquiring the markers, however the latitude and longitude are both null - vue.js

I have been working on displaying markers on a map. When I fetched the data, everything seemed fine in Vue DevTools. The `this.markers` property also contains the data. However, to my surprise, the values for `lat` and `lng` inside the markers are showing ...

javascriptgoogle-mapsvue.jsvuejs2

The Angular @Input directive may be prone to receiving inaccurate model data

I am currently working on setting up @Input for my component using a model that resembles the following: interface Car { sail?: never tires: number weight: number } interface Boat { tires?: never sail: boolean weight: number } exp ...

javascriptangulartypescript

What could be causing this JavaScript code not to run?

Help needed! I'm a student struggling to diagnose the issue in my code. Whenever I click the buttons, nothing happens at all. I've tried debugging by isolating each function, but still can't seem to figure it out. I've searched through ...

javascripthtmlblogs

Passing an array of selected values from Vue.js to a text area and adding them to the existing content

I'm facing a situation and I could really use some assistance. The image shows that there is a multiple select box on the left with numbers, and a text box on the right. My goal is to allow users to click on the house numbers in the select box and hav ...

javascriptvue.jsvuejs2vue-component

Elevate sublevel vue component

I am facing an issue with a nested and reused vue component. I am attempting to use v-show to display a part of the component (icons) when its outer parent is hovered. In order to achieve this, I am passing the parent and child index as props. However, I ...

javascriptvue.js

What is the best jQuery library to add to my website?

I have included several jQuery scripts on my website for various functionalities such as sticky header, anchors, and animations. I am wondering if it is necessary to include all of them or if I can just include one or two? Here are the jQuery scripts I ha ...

javascriptjqueryhtml

Understanding the Execution of Asynchronous Code

I've been grappling with this problem for a while now, but I just can't seem to find the solution. That's why I'm reaching out for your expertise. Consider the example below: const async = require('async') var counter = 0 v ...

javascriptnode.jsasynchronouses6-promise