Guide to positioning buttons in the center of an image using Bootstrap 4

I need help centering buttons within two adjacent responsive images. The buttons are currently positioned below the images. Here is my code:

<!--LAB1-->
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="img/lab1.jpeg" alt="Card image cap">
<div class="text center">
<a  href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab1 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>

<div style="height: 10px"></div>

<!--LAB2-->
<div class="col-lg-2 col-md-6 col-lg-6"
<div class="view overlay">
<img class="img-fluid" src="img/lab2.jpg" alt="Card image cap">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab2 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>

Here is an image of my current layout for reference.

javascripthtmlcssimagebootstrap-4

Answer №2

To align the button relative to its parent, first set the parent's position to relative. Then apply absolute positioning to the button.

.btn{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

Here is a code example for reference: CODEPEN

Answer №3

If you're working with Bootstrap 4, you can implement this code snippet to adjust the left and top percentage based on image pixels in CSS. Here's how you can do it:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-6 col-lg-6">
            <div class="view overlay">
                <img class="img-fluid" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
                <div class="text center">
                    <a href="https://www.google.com" target="_blank" class="btn btn-secondary button_position" role="button">Lab1 Website</a>
                </div>
            </div>
        </div>
    </div>
</div>

For the CSS section:

.button_position {
  position: absolute;
  left: 30%;
  top: 40%;
}

You can also check out the live example here on JSFiddle.

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

Tips on obtaining the data count from using the $.get method

Here is the code I'm currently working with: $.get('getstatsAccepted' + tickerid, {tickerid: tickerid}, function(data) { alert(data.length); }, 'json'); I am interested in obtaining the numbe ...

javascript

Ways to retrieve the file name and additional attributes from a hidden input type

Is it possible to access the file name and other attributes of a hidden file when submitting it using the <input type="hidden"> tag? My current project involves drag and drop file functionality on a server using Node.js. If I am able to dynamically ...

javascriptjquerynode.jshtml

Issue encountered when attempting to assign an action() to each individual component

I'm facing an issue with the button component I've created. import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` <ion-button color="{{color}}" (click)="action()"&g ...

javascriptangularionic-framework

The API functions properly in Postman, however, encountering issues when integrated into the frontend of a React

I am currently working on an ecommerce project using the MERN stack for practice. Being new to the Mern stack, everything is running smoothly except for the "UpdateCategory" functionality in the frontend section. Interestingly, it functions perfectly in PO ...

javascriptreactjsmongoosepostmanmern

What is the method for ensuring that a badge is consistently in a circular shape?

My notification badge can change shape depending on the number inside it - sometimes it's a circle and other times an oval. Is there a way to ensure that it always appears as a circle? I am utilizing materialize CSS with the following HTML/CSS code: ...

jqueryhtmlcss

What is the best way to include distinct text beneath each box within this slider or carousel?

Is there a way to add new text at the bottom of each box in this code? Visit CodePen I specifically want the new text to show underneath the boxes, not inside them. Each box should have different text associated with it. When you navigate using the left ...

javascripthtmlcssslidercarousel

Achieving a layout with two rows containing two flexboxes on each row using Flexbox

Currently, I'm working on getting two flexboxes on each row. Here is the current layout: https://i.sstatic.net/UsAI6.jpg Here is the desired layout I'm aiming for: https://i.sstatic.net/wRhw4.jpg I want to have 4 flexboxes in total, with 2 on ...

htmlcssflexbox

Utilizing jQuery to highlight and customize portfolio items with odd numbers

I'm currently trying to rearrange the module header and portfolio image for odd-numbered portfolio items. Feel free to check out my sandbox here. I thought the code below might do the trick, but it's a no-go. jQuery(document).ready(function($){ ...

jquerycsscss-selectorsjquery-selectorschildren

Retrieve the value of a dropdown menu that contains multiple selections associated with a single model

My current code generates a calendar entry listing for the courtroom, with each case having a "status" dropdown that is set by the judge post-hearing. I now need to save this data in the database. I have successfully added ng-change which triggers the desi ...

javascriptangularjs

Is it possible to design this without JavaScript, using only CSS3 and HTML5?

Is it possible to achieve this design using only CSS3 and HTML5, without the use of JavaScript? Header (includes an image) : Height: flexible (depends on the width of the image) Position: fixed Content (contains text) : Height: flexible (height of l ...

htmlcssresponsive-design

Discover the steps for dynamically integrating ionRangeSliders into your project

Recently, I integrated ionRangeSlider to display values to users using sliders. To set up a slider, we need to define an input tag like this: <input type="text" id="range_26" /> Then, we have to use jQuery to reference the input tag's ID in or ...

javascriptphpjqueryhtmlajax

Listening for button clicks in a Bootstrap drop down menu using JavaScript

I'm struggling to figure out how to detect button clicks in a drop-down menu. I've tried using Array.from to assign an event listener to each button in the drop-down, but it doesn't seem to work efficiently. It feels inefficient to assign in ...

javascriptjquerybootstrap-4

Transfer the text link to the following page

In the web project I'm working on, I created a tagcloud. The goal is when a user clicks on a tag, it should redirect to the page showRecipesFromTags.php. <form name="tagform" id="tagform" method="get" action="/showRecipesFromTags.php"> <?php ...

phphtmljsonform-submit

To successfully use Router.use(), you must provide a valid middleware function. How can we resolve this issue of passing undefined as

I have developed a CRUD application using node.js and now I need to incorporate another node project as a microservice. To send HTTP requests to the other node project, I am utilizing the axios npm module. However, when I run the code, I keep encountering ...

javascriptnode.jsjsonexpressmicroservices

Generating a new argument and incorporating it into a click handler

Hello, I am a beginner in javascript and I need some assistance with creating an argument and adding it to a click event using jQuery. Here is a demo that I have created: http://jsfiddle.net/zidski/8VwAy/1/ If anyone could provide an example of what I ne ...

javascriptjquery

Extracting information from an HTML table with Jsoup

Currently, I am attempting to utilize jsoup in order to parse an HTML table. As a newcomer to jsoup, I have taken the time to review some tutorials on how it operates. My objective is to retrieve values from each column within this specific website's ...

javahtmlparsingweb-scrapingjsoup

Ensure that the JavaScript file is fully loaded and that the JavaScript function has been properly initiated prior to executing any additional

Having an issue with a tracking code not working properly as it is called before a required JS script and function is loaded. The situation is as follows: Upon successful form submission (CF7 on WordPress), the following function is immediately called. ...

javascriptjqueryajaxwordpress

Design challenges, consisting of both fixed width and elastic elements, have been resolved

After searching through various posts, I couldn't find the solution I needed. Currently, I am working on a design in Photoshop and foresee a potential issue when translating it into html+css. Picture this: my center div is set at 960px with a semi-tr ...

htmlcssbackgroundfixedliquid-layout

X-ray Picker failing to retrieve a value

I am currently using the most recent version of the x-ray npm module in the code snippet below. Despite my expectations, the Meta and Metatags elements remain empty when I print out obj. Can anyone help me identify what I might be missing? var Xray = req ...

javascriptnode.jsweb-scrapingnpmcheerio

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Currently, I have a view component setup where clicking the edit button directs me to the register component for form updates using patchvalue. The issue that I am facing is that when I update and register the form using the same button, it creates anothe ...

javascriptangular