I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Any tips on how to position my btn button both vertically and horizontally in the center on top of two images? I want it to look like this:

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

This is the code for my button: 

<a class="btn btn-primary" href="#" role="button">Link example</a>
, and I'm using the latest version of Bootstrap 5.

MY CODE

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe5fbe7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <a class="btn btn-primary" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
      <a class="btn btn-primary" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6">
      //other code
    </div>
  </div>
</div>

htmlcssresponsivebootstrap-5

Answer №1

Take a look at the Center elements documentation. You also need to ensure that each image and button pair is placed in their own separate containers:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5809b859b87">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="col-lg-6 position-relative mb-5">
      <a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6 position-relative">
      <a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
      <img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
    </div>
    <div class="col-lg-6">
      //other code
    </div>
  </div>
</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

Click the "Add to Cart" button to make a purchase

Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to ...

javascripthtmljquerycssmode

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...

csssafarihtml-email

Skewed div with a stylish background image

Struggling with an issue here. I've managed to skew my div just right, but now I'm trying to get the image to fit without tiling. If anyone can offer some assistance, that would be greatly appreciated. This is what I'm aiming for: https://i ...

htmlcss

Pointer-enhanced Material UI Popup

Is there a way to implement a Popup that looks like the image provided using @Material-ui? https://material-ui.com/ I attempted to use Popover, however Popper does not include a pointer like in the image. https://i.stack.imgur.com/atz0G.png ...

cssreactjsmaterial-ui

Is it possible to modify the CSS styling of the file_field?

I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...

javascripthtmlruby-on-railscss

What could be causing this code to only modify one element instead of both?

One input field should be able to change two elements, however with jQuery it appears that only one element is being modified. When rearranging the order of elements in the function, such as having #inCoin first and then #receive_amount, only the #inCoin ...

jqueryhtml

Adjust the appearance depending on the React state variable

I am trying to add animation to a search icon when clicked in React. Using the useRef hook, I am able to access the element and applying custom styles to it. const [searchBar, setSearchBar ] = useState(false); const searchIcon = useRef(); const searchIconS ...

htmlcssreactjsreact-hooksuse-ref

Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones. Below you will find a photo and corresponding code snippets: /* Products list - view list */ .product ...

css

Troubleshooting problems with background-image in CSS using Javascript

My latest project involves coding to assign background images to various classes using jQuery. The image files are named in a numerical order, such as 0bg.jpg, 1bg.jpg, 2bg.jpg, and so on. for (i=0; i < 8; i++) { $('.hpCarousel:eq('+i+' ...

javascriptcssbackground-image

Creating a personalized HTML email template with a TypeScript foreach loop

As I work on developing an app, users will have the opportunity to share product information via email. Each product includes a title, image, description, ingredients, and a list of energy values. Currently, I am able to send an email with all the product ...

htmlangulartypescript

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

javahtmlhttpweb-applicationswicket

From plain to vibrant: Using CSS gradients for background design

I have customized a button by adding a gradient to it. Below is the code snippet: .mybutton { background: #258dc8; /* Old browsers */ background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */ background: -webkit-gradient( ...

css

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

javascriptcssreactjsanimationreactcsstransitiongroup

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

javascriptjqueryhtmljquery-selectors

What is the best way to anchor an image to the bottom right corner while also adjusting its position as

Hey there! I have a challenge where I want to anchor an image at the bottom right corner of a webpage. Initially, it works perfectly using this CSS: .logo img{ position: absolute; bottom: 0; right: 0; } However, when I resize the window, the ...

htmlcssimage

The function element.innerHTML is invalid when trying to assign an object value as an option

Hey there! I'm currently working on a JavaScript project where I have an input that retrieves text from an array. Each option in the array needs to be linked to an object so I can utilize its attributes. const data = [ { name: "SIMPLES NACION ...

javascripthtmlcss

The Best Way to Align a Large Image in the Middle of a Browser Window Using Inline HTML

Currently, I am attempting to center an image that is 1920px wide within the browser window. The challenge lies in not having it fit entirely within the window, so using width:100% will not achieve the desired effect. Furthermore, this needs to be accomp ...

htmlcssimageinline

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

The HTML Style for implementing HighChart title text does not work when exporting files

I have inserted the <br/> and &nbsp; HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...

javascripthtmlcsshighchartsstyles

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

While utilizing bootstrap-select selectpicker for <select> lists, I am encountering an issue where the on change event is being triggered twice. Here is an example of my select list: <select class="form-control selectpicker label-picker" ...

javascriptjqueryhtmlbootstrap-selectpicker