Is there a way to create buttons like the ones shown in the examples using Bootstrap 5 or custom CSS classes?
Examples: [Set of buttons][1]
Notice how some of them function as dropdown buttons.
I've searched for examples but most of them only show icons and text in the same line. Should I consider using a Bootstrap Card? [1]: https://i.sstatic.net/V78lr.png
Wrap your text and icon in a div element, apply the CSS properties display: flex; and flex-direction: column; to achieve the desired layout
Solution:
.command-button {
width: 85px;
display: flex;
flex-direction: column;
text-align: center;
background: #f8f9fa;
padding: 10px;
margin: 0px 3px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
border-color: #ccc;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e100e100d4245544113">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb9a2bca2bca1eee9f8edbf">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div style="display: flex; flex-direction: row; padding: 0px 15px;">
<div class="command-button dropdown">
<img src="" width="30" height="30" style="margin: auto; margin-bottom: 5px;">
<b class="dropdown-toggle" id="dropdownVisibilidad" data-bs-toggle="dropdown" aria-expanded="false">
Visible
</b>
<ul class="dropdown-menu" aria-labelledby="dropdownVisibilidad">
<li><a class="dropdown-item" href="#" >Make visible</a></li>
<li><a class="dropdown-item" href="#" >Make not visible</a></li>
</ul>
</div>
<div class="command-button">
<img src="" width="30" height="30" style="margin: auto;">
<b>Delete</b>
</div>
</div> For those looking to create boldly stroked texts in Firefox and Safari, using paint-order and text-stroke (or the prefixed -webkit-text-stroke) is the way to go. Here's an example: h1 { -webkit-text-stroke: 5px red; paint-order: stroke fil ...
My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...
I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...
I have a php form that generates a drop-down menu using php mysql. The current menu is simple, but I would like to enhance it by adding a right arrow for sub-children and a down arrow for child menus using css. Unfortunately, I am unable to modify the css ...
Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...
Is there a way to style my text to match the appearance in the image shown using CSS? ...
I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...
I am currently working on a project that involves a div dynamically shrinking as the page size decreases. However, I have encountered an issue where the height of the div remains constant despite this resizing: CSS .container { min-height: 180px; max ...
I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...
Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...
I previously inquired about a similar issue and received an excellent solution. Here is my jsbin http://jsbin.com/nuwagibayo/1/edit?html,css,output where I encountered the following scenario: The positioning of 12.50 seems slightly awkward in its current ...
https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...
Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...
Looking to swap out the carousel slide image with a loom video. Any ideas on how to replace the media img with an iframe in material-auto-rotating-carousel? const AutoRotatingCarouselModal = ({ handleOpen, setHandleOpen, isMobile }) => { return ( ...
How can I align the contents of a map and a form side by side with responsive design? I've attempted using tables and lists, but the form keeps appearing on top of the map. Ideally, I want the contents to be displayed side by side on wider screens and ...
Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...
Is there a way to dynamically change the width value of a div element based on a variable? The div contains blocks, and the size of each block is determined by the variable. For example, if $t->spotdiff = 2, I would like two equal blocks in a column wit ...
I am facing an issue with my two forms that I want to have a fixed full-screen size. Despite trying different bootstrap options, they are not responsive at lower resolutions. What should I do to make them responsive? Here is the code: <form action=&a ...
Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...
I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...