Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner">
  <button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
  <a href="link.php" type="button" class="btn btn-warning yekan pjax"> center</a>
  <button type="button" class="btn btn-warning yekan ">up  <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>

Here is the result:

https://i.sstatic.net/gh7xk.png

The middle button has a border and gradient. How can I change it to make it look like the other buttons? I've tried adding border:none to all .btn classes and the button group, but it didn't work.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To fix the issue, simply delete the type=button attribute from the a element.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner" >
       <button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
       <a  href="link.php"  class="btn btn-warning yekan pjax" > center</a>
       <button type="button" class="btn btn-warning yekan " >up  <i class="mdi mdi-arrow-up-bold"></i> </button>
   </div>

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

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

How can I create a Bootstrap grid with four columns where the second column spans two rows? Hello, I am looking for help to achieve a portfolio grid layout with 4 columns (refer image here) and have the second column span 2 rows. I plan to include images ...

jqueryhtmlcsstwitter-bootstrapportfolio

Apply a class to each element that contains the specified name attribute

I have successfully implemented a prices tab on the top of my page, with tabs for different packages at the bottom. When a user selects a certain package, only specific items from the list are visible while the others are hidden. I managed to streamline ...

javascriptjqueryhtmlcss

How to center an item in a Bootstrap navbar without affecting the alignment of other right-aligned items

Currently, I am in the process of designing a website and have implemented a Bootstrap navbar. The navbar consists of three icons aligned to the right, and I am looking to center another element. However, when I use mx-auto, the element does not center per ...

htmlcssbootstrap-5

some minor layout constraints in Bootstrap

I'm facing an issue with the bootstrap grid system. I have 6 items to display - 3 across on each line for MD screens, 2 across for SM screens, and then down to 1 for XS screens. I also need space on the left and right of each item. Currently, the setu ...

gridbootstrap-4

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

Position Bootstrap buttons to the right side

I am looking to reposition the buttons in the header, shifting them from the default right side to the left side. Specifically, I want to move Abcd to the right side and have A1, A2, A3, A4, and A5 displayed on the left side. Here is my current code: < ...

htmlbootstrap-4bootstrap-modal

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over. <div class="a"></div> Above ...

htmlcss

Icon displayed within the input field

Is there a simple method to add an input text element with a clear icon on the right side, similar to the layout of the Google search box? I've searched, but I could only find instructions for placing an icon as the background of the input element. I ...

javascriptjqueryhtmlcss

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

I've been trying, but all I can manage is: <img width='220' height='280' src='chrome-extension://okjaohhbffepkcfacapapdhkmnebgiba/johnny.jpg' class="me"/> Unfortunately, this code only works in Chrome. Is there a ...

javascriptjqueryhtmlcss

Error in Firefox: "Anticipated media feature name, but discovered 'hover'"

I am trying to style elements differently based on whether the client browser supports hovering or not. I came across media features as a solution and implemented it in the following way: /* Supports hovering */ @media (hover: hover) { ... } /* Does not ...

cssfirefoxhovermedia-queriesinteraction-media-features

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...

csshtmlattributescss-selectors

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

javascripthtmlcssbootstrap-5

Creating a space for showcasing error messages in Angular and CSS

How can I display an error message min 3 char at the bottom of an input field when only 1 character is entered? Referencing this example: https://i.sstatic.net/Eujle.png Currently, the error message appears on the right side of the input field. https:/ ...

cssangularjs

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can you explain why Firefox is cutting off circular png images at the bottom of this page: It's strange that IE 10 and Chrome don't have this issue with cropping the images. ...

cssimagefirefoxbrowsercross-browser

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

javascripthtmlcssbootstrap-4

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

When the button is clicked, the text in ng-model=name should be displayed in the <h2> tag. <div ng-model="name">This is a text</div> <button ng-click="getname()">Click</button> <h2>{{name}}</h2> ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui