Create identical buttons using Bootstrap 4

I am trying to create uniform left and right buttons, but I am facing issues with making them look the same on both PC and mobile devices. Here is the current appearance:

View the current button design

            <h3>
                <a href="" class="btn btn-outline-primary" id="one">SHORT</a>
                <a href="" class="btn btn-outline-primary" id="two">SHORT</a>
            </h3>
            <h3>
                <a href="" class="btn btn-outline-primary" id="three">FEW WORDS</a>
                <a href="" class="btn btn-outline-primary" id="four">SHORT</a>
            </h3>

Check out the current CSS

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to display them in a neat format, consider placing them inside a table with a width of 100%.

Here's an example:

With CSS:

td a {width:100%}


<table>
    <tr><td> 
            <a href="" class="btn btn-outline-primary" id="one">SHORT</a>
          </td>
          <td>
            <a href="" class="btn btn-outline-primary" id="two">SHORT</a>

        </td></tr>
        <tr><td> <a href="" class="btn btn-outline-primary" id="three">FEW WORDS</a>  </td>
            <td>
            <a href="" class="btn btn-outline-primary" id="four">SHORT</a></td></tr>
</table>

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 is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

pythonhtmlseleniumhref

Tips for adjusting the item count in mat-autocomplete

For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io Below is a snippet of my code import { Component, OnInit } from '@angular/core&a ...

htmlcssangularangular-material

How can I make sure my rows are properly aligned using the Grid

Looking at the image below, I am attempting to align "Ticket Number" and "Email" using a Grid: View My Result Image <Grid container direction="row" justifyContent="flex-start" alignItems="stretch" style={{ pad ...

javascripthtmlcsscss-grid

Is there a way to extract all the data values starting with "data-" from the selected input fields in HTML5 and compile them into an object?

Looking for a way to automate input values: <input class="form" type="checkbox" name="item1" data-value="{ 'item1':'selected', 'price': 100 }" checked="checked"> <input class="form" type="checkbox" name="item2" data- ...

javascriptjqueryhtml

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

Removing an item from a table row cannot be completed due to the inability to retrieve the list_body ID necessary for deletion

I have been working on enhancing the delete button function in my table. The id linked to the list_body must be incorporated into the delete function code. I utilized some jquery methods to render the list onto the webpage. //retrieve user list information ...

javascripthtmljqueryhandlebars.js

Retrieving information from a user input field within the back-end code

In my current project using asp.net C#, I am incorporating the jQuery UI Calendar control. To learn more about this calendar control, you can visit the calendar control website. One thing to note is that the calendar control requires an input control with ...

c#htmlasp.netformsjquery-ui

Maxlength and Minlength attributes are not considered when using input type=“number”

Why is the maxlength attribute not functioning properly for this input element? <input type="number" maxlength="5" maxlength="10" /> ...

javascripthtmlangularjsweb-deployment

What is the process for ensuring that an image is set as the submit button in an HTML form on IE 7?

My HTML form is designed with an action on a PHP script, and the submit button displays a custom image instead of the default grey. While this code works perfectly in Chrome, it fails to function properly in Internet Explorer 7. Do you have any suggestions ...

phphtmlimagebuttonsubmit

Struggling to have images line up side by side within a div

Check out my code snippet here: http://pastebin.com/pDkM4FQi #img1, #img2, #img3, #img4 { display: inline-block; height: 100%; } #navBar { background-color: white; border: 1px solid white; border-radius: 15px; display: inline-block; height ...

htmlcssimagenavbar

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values. ...

javascriptcssreactjstypescriptradix

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Looking for help with integrating HTML/CSS code into React/Bootstrap? I need assistance with coding in React using Bootstrap. How do I effectively use components and props? Even after installing bootstrap, I am encountering errors. Is it possible to dire ...

javascripthtmlreactjsbootstrap-5

Using CSS to Identify When an Element is Being Grabbed, Dragged, or Moved

Is it possible to detect mouse grabs in addition to changing the cursor on hover? For example, try dragging the items in the following code snippet. The goal is to change the cursor to cursor: move if an element is being moved. <script src="https:// ...

htmlcss

What is the reason for innerHTML not functioning properly when trying to include HTML?

Apologies for my poor English, but I am determined to solve this issue using HTML code. <body> <div id="booklist"> <?php include("../templates/nav.php"); ?> <div class="hero"> <?php include("../templates/aside.ph ...

javascriptphphtmlinclude

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Align a card in the center of a carousel using Bootstrap

I'm looking to include a card within a carousel, but I'm struggling with getting the card element centered inside the carousel. Here's my current code: <div class="container"> <div class="row"> < ...

htmlcssbootstrap-4

Ways to retrieve nested #document within html?

Hey there! I'm trying to figure out how to use document.querySelector() to locate span id='t1', but I'm unsure of how to access the #document element and its contents. Is it possible to select elements within #document? Currently, I ha ...

htmldocumentqueryselector

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

javascriptjqueryhtml

The use of JQuery's .show() and .hide() functions may disrupt the functionality of CSS hover

When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CS ...

jquerycsshovershow-hide

Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text ...

htmlcsssticky-footersafari