Guide on incorporating the <a> element within a Bootstrap button

Check out this Demo on JS Fiddle:

I am having trouble adding the href attribute to these buttons.

I found that it works when structured like this : 

<a href="/">
    <button type="button" class="btn btn-default btn-custom">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        <br />
        <span class="btntext glyphicon-class">PP bậc thang</span>
    </button>
</a>

However, it results in a messy display like this :

Is there an easy solution to this issue? Thank you in advance!

htmlcsstwitter-bootstrapbutton

Answer №1

Utilize the btn class for the anchor tag instead.

<a href="/" class="btn btn-default" ...

Make sure to also refer to the documentation.

Answer №2

Here is the updated version of your buttons on the fiddle with proper functionality:http://jsfiddle.net/ettmujvg/9/

 <a href="#" class="btn btn-default btn-custom">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
      <br />
      <span class="btntext glyphicon-class">PP bậc thang</span>
 </a>

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

What are some methods to maintain consistent height for each list item in an unordered list on small screens like mobile devices?

While vh works well for larger screen sizes such as laptops, it may not maintain the height of the li on smaller devices like mobiles. Is there a better approach than relying on media queries to achieve responsiveness across different screen sizes? ...

javascriptjqueryhtmlcss

Efficiently linking styles through computation in Angular

So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously. For example, I have this code snippet that wor ...

htmlcssangular

CSS - spacing anomaly among inline-block items

I am facing a strange issue with the arrangement of elements in my container div. I have set them to display: inline-block, and they are supposed to expand horizontally if the contents exceed the device width. However, there is an unexpected margin between ...

csshtml

Positioning an HTML div

Currently, I am diving into the world of HTML and have included a relative div in my code. Although there are two additional divs positioned before it, they do not overlap; unfortunately, the first two still occupy space above the relative one. My desire ...

htmlcss

Guide to displaying an input box depending on the selection made in a Mat-Select component

I am working on a mat-select component that offers two options: Individual Customers and Organizational Customers. When selecting Individual Customers, the dropdown should display three options: First Name, Last Name, and Customer Id. However, when choosin ...

htmlangulartypescript

Struggling to find your way around the header on my website? Let me give

I'm looking to display certain links prominently at the top of a page, similar to this example: "home > page1 > link1 > article 1." Can someone advise on how to achieve this using HTML, PHP, or jQuery? ...

javascriptphpjqueryhtml

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

The z-index property in jQuery dialog does not seem to function properly when used within an

When using bootstrap with jQuery dialog, I encountered a strange issue. If the z-index of the dialog is set to 1 or higher in a standalone script, everything works fine. However, when the same script is called inside an iframe, the dialog ends up appearing ...

javascriptjquerycsstwitter-bootstrap

What is the best way to trigger a PHP function using a button click event?

One of the functionalities I have is a reset button that's supposed to switch out the JSON data displayed here with a different dataset called defaultStats.json (that I've saved for this purpose). Here's a snapshot of what the current databa ...

phphtmlmysqlsql

ngModel.$setValidity is a one-time operation

Currently, I am working on a validation issue with an angular bootstrap ui datepicker popup. I have set the max and min dates for validation, which work when the user selects a date from the calendar. However, if the user manually inputs a date, these vali ...

angularjstwitter-bootstrapvalidationangularjs-directivedatepicker

Managing the load more feature with a Selenium script using Python

As a newcomer to Python, I am experimenting with automating clicks on the "load more" button found in the comment section of Instagram using Selenium and Python. Despite being able to click once successfully, the button disappears after the first click. ...

pythonhtmlseleniumwebautomation

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

Vue.js error: Unable to locate requested resources

Recently, I've been encountering a curious issue when trying to access a specific component in my application. When I manually type the URL http://localhost:8080/detailed-support/start into the browser, the content loads without error. However, none o ...

javascripthtmlvue.js

Adjust CKEditor's height within Vue.js

I recently began experimenting with integrating ckeditor5 into a Vue.js project. However, I encountered an issue where I couldn't manually adjust its height. Below is the code snippet I used - could you please review it and let me know if there are an ...

cssvue.jsvuejs2ckeditorvue-component

Executing a PHP script

As I work on setting up a html form integrated with php for submitting user data to a database, I'm curious about the best tools to utilize in order to run and successfully test my program. Since it is a php file, what are the most efficient methods t ...

phphtmlsql-server

Populate div with straight lines running vertically or horizontally

I'm wondering how to create vertical or horizontal lines inside a div. I tried this in the past but lost the code, and searching for "fill div with lines" isn't giving me any relevant results. Here's an image to illustrate what I'm try ...

htmlcss

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Is there a way to display city weather information that I have selected from a drop-down menu using JSON? I am able to retrieve the city using jQuery, but I am not sure how to load the weather data for that city. Any guidance on this would be appreciated ...

htmlcssjsonapi

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

javascripthtmlcomboboxwebformsdrop-down-menu

What's the easiest method for moving div content from side to side?

Working on a plugin for WordPress, I am faced with the task of moving content in a slider from left to right and right to left. My current attempt is as follows: var effect = 'slide'; // Set the options for the chosen effect type var opti ...

javascriptjqueryhtmlwordpress

Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background? Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear. https://i.ss ...

htmlcssangularangular-materialscrollbar