Unable to eliminate border on bootstrap button

I have a unique bootstrap button design that I'm struggling to remove the border from after it's clicked. While I was able to successfully change the background color, I'm faced with an annoying blue border that won't go away.

Every time I click on the button to open a modal window and then close the modal, the border persists until I click elsewhere on the page. I've tried adjusting the values in :active and :focus but haven't had any luck.

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

html:

<button id="openPopup" type="button" class="btn btn-primary btn-lg text-uppercase" data-toggle="modal" data-target="#myModal">
    some text here
</button>

css:

#openPopup {
  padding: 20px 30px;
  background-color: #a2238e;
  border-color: #a2238e;
  box-shadow: 1px 1px 1px #999;
  white-space: normal;
  font-size: smaller;
  letter-spacing: 0.2px;
}

#openPopup:hover, #openPopup:active, #openPopup:focus {
  background-color: #912284 !important;
  border-color: #912284 !important;
}
javascriptjqueryhtmlcss

Answer №1

If you're using Bootstrap 4.5.0, give this a shot:

<button class="btn btn-primary shadow-none">INSERT TEXT HERE</button>

Tested and confirmed working.

Answer №2

Give This a Shot

<div class="container">
  <button type="button" class="btn btn-primary">Click Me</button>
</div>

Check out Bootstrap

Answer №3

When working with Bootstrap 4, you have the option to easily remove borders from elements such as buttons by using the border-0 utility class:

<button class="btn btn-primary border-0">Button</button>

Answer №4

Give this a shot

#openPopup:focus {
    no outline;
}

or

#openPopup:focus {
    outline: 0px;
}

Answer №5

Give this a shot:

Simply include the shadow-none class alongside the btn-primary class.

<button class="btn btn-primary shadow-none">some content</button>

Answer №6

Give this a shot

#openPopup { outline:none; border-style: none; }

#openPopup:hover, #openPopup:active, #openPopup:focus { outline: none; border-style: none; }

Answer №7

I have successfully implemented this solution using Bootstrap 4.6.0

#openPopup {
    border: none;
    box-shadow: none;
}

Answer №8

Consider eliminating the border when in :focus and :active states

#openPopup:active, #openPopup:focus { 
   border-style: none !important;
}

Answer №9

Bootstrap 5 was a success for me with this solution.

style="border-radius: 0em;"

Answer №10

#showOverlay insert text-shadow: none; see here

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

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

javascriptreactjstypescriptnext.jsswr

Tips for updating datatables following an ajax request

I've attempted various methods to refresh my data table following an AJAX Call but have had no success. I have tried using the draw() and ajax.reload() functions, but nothing seems to be working. Do you have any suggestions on how I can successfully r ...

javascriptphpjqueryajaxdatatable

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...

javascriptreactjstypescriptvalidationantd

Using an HTML and PHP form to store data in the database, it currently defaults to entering "0000-00-00" for the date instead of the date chosen

Recently, I encountered an issue with inserting date information from an HTML form into a database using a PHP file. The HTML form included a date field with an HTML5 datepicker that was supposed to simplify date selection. However, despite adjusting the P ...

phphtmlmysql

transfer a javascript variable with ajax

I am currently developing a website that contains multiple forms, most of which will be submitted using jQuery AJAX. Although I have implemented reCAPTCHA for security reasons, the client is not satisfied with it due to the difficulty in reading the words ...

javascriptphpjqueryajax

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

cssreactjsmaterial-ui

Using jQuery to access a server-side SQL database through PHP

After searching for an example on connecting a client to a server's SQL database using JQuery, AJAX, and PHP, I came across this seemingly well-executed guide: Example Link. All my PHP files and the jQuery library (javascript-1.10.2.min.js) are contai ...

javascriptphpjquerysqlajax

Steps for Creating a JSON `data` Object for a JQuery Galleria

I've encountered an issue with JQuery Galleria, and the support representative mentioned that it's a bug. To address this, they advised me to place my images into a JSON variable data object in my JavaScript. However, I have little to no experie ...

jqueryjsongalleria

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

Django authentication ensures secure access for users on

What could be causing the issue with self.request.user.is_authenticated() not functioning correctly in this specific view? class ArticleDetailView(DetailView, CategoryListMixin): model = Article template_name = 'mainapp/article_detail.html&ap ...

pythonhtmlcssdjango

Tips for making a stretch height block using CSS

Hello! Can anyone assist me with CSS styling without involving JavaScript? I am looking to set up the main block with a fixed or variable height, based on a percentage of its parent container, not the window height. <div class="main" style="height: 13 ...

htmlcss

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

javascriptjqueryhtmlcsswordpress

Explaining a database table by converting HTML code into MySQL

Greetings! I am currently working on a website that involves using MySQL, PHP, and HTML to manage data. However, I am facing an issue when trying to display the data from my database's table using PHP and SQL code. Here is the snippet of code I have w ...

phphtmlmysqldatabase

The translateX property will be set to the offsetX value of the event when the mouse is moved, resulting in a

Here's a quick and easy question regarding some kind of scrubber tool. Check out the fiddle below. When using jQuery to bind to the mousemove event and adjusting the transformX property in the positive direction, there's a 50% chance it will ret ...

javascriptjqueryhtmleventsmouseevent

Make sure to review for any duplicate entries prior to making updates to

Here is the issue I am facing... I am working with an SQL table that contains detailed information about flights, such as arrival date, arrival time, departure date, departure time, and more. When updating a flight entry, I need to ensure that the dates o ...

phpjquerymysqlsql

What is the process for generating a new array of objects by leveraging the contents of two given arrays?

In my data collection, I have multiple objects stored in arrays like so: tableCols = [ { "id": 50883, "header": "ABC", "operator": "Sum", "order": 2 }, ...

javascriptarraysjsonforeachkey-value

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

Ways to display a desktop image in a div element?

Could anyone assist me in moving an image from my desktop into one of my div tags? I seem to be encountering some difficulty with this task. <!DOCTYPE html> <html> <body> <img src="C:\Users\aldiaz\Desktop&bs ...

htmlcssimage

Images Are Failing to Load on the Webpage

I'm facing an issue with appending pictures of restaurants to dynamic div IDs. When I make the div ID static, the pictures show up fine from the server, but when I try to make it dynamic, the images don't get appended. Can someone please assist m ...

javascriptjqueryajaxjsoncordova