Is it possible to place a button on top of a card image using Bootstrap 4 Cards?

I'm currently exploring Bootstrap4 and I'm encountering an issue with the images. Essentially, what I aim to accomplish is as follows:

Bootstrap4 Card featuring a top right button on the image

My goal is to overlay a "3-dot" button over the image in the top right corner. This button will serve as a dropdown menu with options like edit and share. The code for creating the card without the button is as follows:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card 
title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

I've attempted to enclose the card-img-top and a button within a div tag, but the image ends up going out of bounds. Any suggestions on how to achieve this? Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To enhance the design, you can opt for using the image as a background image with added height. Alternatively, apply absolute positioning to the three dot button and align it by setting top: 5px; right: 5px.

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

Struggling to develop an age calculator tool that allows users to adjust the value using an up and down arrow function

https://i.sstatic.net/8Qjuf.png I'm currently working on a project that involves creating a tool to display a label with up and down arrows for adjusting the "Age" value. However, I've noticed that whenever I refresh the page, the functionality ...

htmlcss

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

htmlcss

How to apply background-color to a div element with ng-repeat directive?

Hey there, I'm dealing with the following code: angular.module("myApp", []).controller("myController", function($scope) { $scope.boxList = [{ color: 'red' }, { color: '#F8F8F8' }, { color: 'rgb(50, 77, 32) ...

htmlcssangularjs

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...

javascriptjqueryhtmlcss

How can I center the horizontal scroll position of a div when it loads?

Currently, I am working on a project where I have a parent div with a width of 100vw. Inside this parent div, there is another div with a width of 150vw and the overflow-x property set to scroll. My goal is to make this inner div appear in the center of ...

htmlcss

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

Refresh your HTML by reloading the JavaScript source

In my Ubuntu setup, I've been using chart.js to generate a graph displaying the values from a pressure sensor on an HTML document. Most of the project is complete, but I've encountered a challenge for which I haven't found a satisfactory sol ...

javascripthtml

Conceal a bootstrapTable column with the power of JavaScript or jQuery

I have incorporated bootStrap Table in order to display information for my users based on the following example. In my table, I am attempting to hide the Edit and Delete options by concealing the operate (Delete User Column) data field. I attempted using ...

javascriptjqueryhtmlbootstrap-table

Is there a way to use jQuery to toggle a child element when the parent is clicked?

There are three images displayed on a webpage, each accompanied by a list of three events. The desired functionality is that when a user clicks on an event, the corresponding information should be displayed below that event. Below is the HTML structure: & ...

javascriptjqueryhtmlcss

Using jQuery to assess the values of all visible textboxes

Coming up with a suitable title for this question might be more challenging than the actual question itself. I've set up an error handler on one of my pages for posting to the database. It validates whether the input fields are empty and prevents exe ...

javascriptjqueryhtml

Eliminate the horizontal scrollbar

I am currently working on enhancing the appearance of this HTML form using CSS. Although I have made progress, I am facing an issue with an unexpected horizontal scrollbar that I cannot seem to remove. To address the layout problem of having 2 columns, I ...

htmlcssforms

Ajax: The requested resource does not have the 'Access-Control-Allow-Origin' header. As a result, access is not permitted from origin 'null'

I recently started learning about ajax and followed a tutorial. However, I encountered an error when trying to run an HTML file along with a linked JavaScript file. Since browsers cannot make requests to file://, I have set up an http-server on port 8080 ...

javascriptjqueryajaxhtml

Issue with margin-top not functioning correctly when utilizing position: fixed via JavaScript

When the navbar is in a fixed position, the margin top of the logo doesn't work correctly. The attached image shows that when scrolling down, it disappears https://i.sstatic.net/JNog6.jpghttps://i.sstatic.net/S5AJ5.jpg <div class="container"> ...

javascriptcssruby-on-railscss-positionfixed

Discrepancy between keydown event and button click functionality

Whenever I click the search button, the sendTitle() function executes flawlessly. However, when I press the enter key (keyCode == 13), the sendTitle() function consistently throws a catch error response (alert cannot connect). I am curious if anyone unders ...

javascripthtmljquerycss

Choose the p tag, but do not include certain child elements

Currently, my jquery code is selecting a section of copy: str = '.main-content p:nth-child('+num+')'; string = jQuery(str).html(); (num is declared elsewhere and is not an issue). While this successfully selects all content within th ...

javascriptjqueryhtmlcss

FlexSlider in the Dazzling Theme - Glitch Discovered

Having an issue with the Dazzling Theme for Wordpress: When I reload my homepage on Google Chrome (with F5), the content is being hidden by the flexslider element. Upon inspecting the HTML/CSS, I found: <div class="flexslider" style="height: 0 ...

javascripthtmlcsswordpress

Show every item from a collection on individual lines within an Angular2 module

I am working with an Angular2 component that is responsible for displaying a list of speakers stored in some data. Currently, when I add the code below to my xyz.component.html, it shows the list as comma-separated strings. However, I would like each speak ...

htmlangulartypescript

What is the reason behind the extra space generated when a keyframe content contains a diacritic mark?

My Angular app's home page features dynamic word changes defined in CSS: .header-text:after { display: inline-block; content:''; animation: fide-in 5s linear infinite; } @keyframes fide-in { 0% { content:'BLA'; opacit ...

angularcsscss-animations

Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...

cssangular

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

htmlcss