eliminating the outline from bootstrap button results in an increase in the margin of the buttons

I'm facing a challenge that should be simple, but it's causing me some trouble. I have code that displays text on the left side and two buttons on the right side of the div.

These buttons use Bootstrap icons, which by default appear within a black border that doesn't look great.

When I try to remove the outline, there seems to be extra margin around the buttons, throwing off the formatting. I just want to remove the outline without affecting the layout.

btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<div style="display:flex; width:300px;">
  <h5>Text</h5>

  <div style="display:flex; margin-left:auto ">
    <button title="Edit Links" class="btn btn-primary" type="button">
       <i class="bi bi-gear-fill"></i>
    </button>

    <button title="Expand/Collapse" class="btn btn-secondary" type="button">
       <i class="bi bi-arrows-expand"></i>
    </button>
    
    <div></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

The provided code applies CSS to remove the outline. But if I remove the CSS for the "btn" class, the button positions change noticeably.

My main goal is to get the buttons closer together. Any suggestions?

Here's what the code looks like without any CSS:

btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<div style="display:flex; width:300px;">
  <h5>Text</h5>

  <div style="display:flex; margin-left:auto ">
    <button title="Edit Links" class="btn1" type="button">
       <i class="bi bi-gear-fill"></i>
    </button>

    <button title="Expand/Collapse" class="btn1" type="button">
       <i class="bi bi-arrows-expand"></i>
    </button>

    <div></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

htmlcssbootstrap-5

Answer №1

The default setting cannot be altered and if you set both margin and padding to 0, it may appear strange when activated or focused like so:

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

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

Create a dynamic webpage where two div elements glide in opposite directions

My apologies for this seemingly basic question, but I am wondering if anyone knows how to create an animation where a div moves up and down while scrolling, similar to the effect on this website: On that site, near the footer, there are 2 sections with 2 ...

jqueryhtmlcss

If the checkbox is selected, the textbox will receive the class "form-input validate required" upon Jquery validation

I am using Jquery Validation plugin to validate a form on my website. Below is the HTML form code: <form id="caller"> <label>Phone:</label> <input type="text" name="phone" id="phonen" class="form-input" value="" /> <di ...

javascriptjqueryhtmlformsvalidation

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Adjusting the thickness of the CSS cursor line upon entering an input field

Having an image as the background for an input field has been causing issues for me. Although I can adjust the line-height and font-size easily, the cursor line appears outside of the background image when clicking inside the input field. Is there a speci ...

phpcss

Development of "individual profiles"

This is my first time venturing into web app development and everything is quite unfamiliar to me. I have successfully set up a couple of PHP scripts to interact with an SQL database for user login and registration purposes. However, I now wish to implem ...

phpsqlhtml

Selenium alert: element click blocked: Another element is in the way of receiving the click

I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...

pythonhtmlseleniumgoogle-chromeselenium-chromedriver

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

Is there a way to activate a click event when I click on a button that is located outside of the dialog element?

In my Vue 3 app, I am using the native HTML dialog element as a modal. I have managed to position a button outside of the modal with absolute positioning. However, I am facing an issue where I cannot trigger a click event (displayNextModal) when clicking ...

javascripthtmlcssvue.jsdialog

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

I'm currently working with a Jade template that looks like this: extends layout block content h2 Characters and Portraits div(id="portraitsBox") - var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Sid ...

cssnode.jstemplatespugcascade

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: https://i.sstatic.net/Pq4vP.png This is what I exp ...

htmlcssreactjscheckbox

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

javascripthtmlcssbootstrap-4bootstrap-modal

Creating a shadow effect within an element: a step-by-step guide

I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...

htmlcss

Element numbering in Internet Explorer 9 now positioned towards the right bottom corner

Whenever I reload the page, the numbering in the li elements seems to shift towards the bottom-right only in IE9, while it displays correctly on other browsers like Firefox and Chrome. Should I implement a specific fix for IE or have I made an error in my ...

javascriptjqueryhtmlinternet-explorer

Using attribute value for CSS background-image styling is a handy technique to

In my current situation, the design calls for the use of two different images as background images - one for desktop and another for mobile. These images are uploaded through a CMS, allowing me to retrieve the URLs for both using PHP. Is there a way to pa ...

phphtmlcssattributes

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

Include a div with absolute positioning that fits within the visible browser window

My current project involves creating a graphical canvas map with tooltips, but I am facing a challenge. I need to ensure that the tooltips, which are absolute positioned divs, remain within the viewport. Unfortunately, I am having trouble achieving this. ...

jqueryhtmlcanvas

How can I make all child elements within a div uneditable?

Is there a way to make an entire div and all of its child elements uneditable without individually setting each one to readonly? This div contains a lot of dynamic content and I need a simple solution to prevent editing. If I set the parent div to readonly ...

javascripthtmlcss

Modal obstructing BsDatePicker

<!-- The Server Modal --> <div class="modal" id="serverModal"> <div class="modal-dialog" style="max-width: 80%;overflow-y: initial !important;" > <div class=" ...

javascriptcssbootstrap-4bootstrap-modalbootstrap-datetimepicker

What do you think about removing the Bootstrap styling from the design?

As a newcomer to Bootstrap and currently working on my second project using this framework, I find myself struggling with overriding CSS styles. It can be time-consuming to locate the specific style that needs to be changed rather than starting from scratc ...

csstwitter-bootstrap

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

javascriptcssreactjsmaterial-ui