Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image :

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

Attempted to enclose the button within a div using 

justify-content-center align-content-center text-center
classes.

.btn-plus {
  display: inline-block;
  background: url(https://via.placeholder.com/30) center no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e2f8e0f8e7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex justify-content-center align-content-center text-center m-3">
  <button type="button" class="btn btn-primary btn-plus"></button>
</div>

Also attempted adding background-position: center; to the btn-plus in the inspector, but none of the methods tried solved the issue.

Seeking guidance on how to resolve this problem.

cssbootstrap-4

Answer №1

Experiment with applying the same approach within the context of your button's class.

.buttonContainer {
   display: flex;
   justify-content: center;
   align-items: center;
}

Apply this class to your div element. The classes you've shared consist of CSS styles.

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

Having trouble getting CSS hover to work on hidden elements?

I am having trouble getting the rollover effect to work correctly on this page, and I can't seem to figure out what's causing the issue. My CSS is quite basic: open{visibility:hidden;} open:hover{visibility:visible;} If you would like to take ...

cssimagestyling

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

`A problem with HTML element display in Internet Explorer versions 8 and 9 involving <p> and <h2> tags`

While working on my website, I encountered an issue with the way text is being rendered in <p> and <h2>. The footer of my site has three columns, but for some reason the middle column is displaying its <p> text within the <h2> text ...

htmlcssinternet-explorer-8internet-explorer-9

What steps do I need to take to develop a feature similar to Tabzilla?

Exploring the innovative navigation bar on Mozilla.org seems intriguing; commonly referred to as tabzilla, it smoothly moves down to reveal the menu at the top of the page. I wonder if there are any existing libraries or ready-made jQuery code snippets tha ...

jquerycssmozilla

Ways to align my image to the left and text to the right using Bootstrap

body{ height: 100%; font-size: 1rem ; } .navbar-brand{ font-family: 'Syne Mono', monospace; color: black; size: 0.5rem; } header { width: 100%; height: 100vh; background: rgb(237,104,104); background: linear-gradient(90d ...

htmlcssbootstrap-4

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If ...

javascriptjqueryhtmlcss

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms

What is the best way to equalize the size of mismatched images in CSS?

My Objective https://i.sstatic.net/KgK0F.png I aim to align images of different sizes and shapes within the same frame using only CSS. The image size should adjust proportionally as the browser window is resized. Current Progress JSFiddle Curr ...

htmlcss

BootStrap Modal: Experience issues with multiple modals opening simultaneously, causing the page to freeze after the last modal is closed

I'm having trouble understanding this, but I have 2 modals <!-- Upload Document Modal 1 --> <div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true"> <div cl ...

jquerylaravelbootstrap-4bootstrap-modal

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Demo available at the bottom of the page Within my code, there is a div called #myDiv that defaults to an opacity of 0. Upon hovering over #myDiv, the opacity changes to 1. See the CSS snippet below: #myDiv { opacity: 0; } #myDiv:hover { opacity: 1 ...

javascripthtmlcss

Angular dropdown button positioned to the left side

I'm encountering a slight issue with a dropdown button while working on making my website mobile-friendly. My goal is to have the button drop down on the left-hand side of it. Below is the snippet of my html code: <!-- A div element for the button ...

htmlcssangulartypescript

How can I customize the visibility toggles for the password input field in Angular Material?

Currently immersed in the Angular 15 migration process... Today, I encountered an issue with a password input that displays two eyes the first time something is entered in the field. The HTML code for this is as follows: <mat-form-field appearance=&qu ...

javascriptcssangulartypescriptangular-material

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs

Combining all CSS files into one and consolidating all JavaScript files into a single unified file

Whenever I need to add a new CSS or JS file, I always place it in the header section like this Add CSS files <link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" /> <link rel="stylesheet" href="<?php echo URL; ?> ...

javascriptcssweb-applicationsweb

The CSS on the maps infobox is not rendering properly when an icon is clicked

Hey everyone, I'm in the process of creating a travel blog on WordPress and have encountered some issues with the CSS on my site. I've included maps and tables that look fine in my fiddle, but when I transfer them to my website, they appear disto ...

cssweb

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching

I can't seem to get the dropdown list to appear. What could be the issue?

I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...

htmlcss

What steps should I take to create a stylish HTML profile with well-organized CSS?

Looking for a way to display photos, biographies, personal details, and more on a webpage? We've got you covered! You can customize the layout using semantic HTML and CSS styles. Build your design online at http://jsfiddle.net/ and thank us later! &l ...

htmlcss