Incorporate a series of interactive buttons within a stylish bootstrap card component

In order to achieve my goal, I am aiming to design a collection of buttons arranged in a grid layout within a bootstrap card element. These buttons should be positioned along the right border of the containing card and remain confined within it. The intention is to later populate these buttons with images, essentially creating a grid of image buttons.

Here is the code snippet I have written:

HTML:

<div class="col-sm-20 card-deck mt-3">
  <div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
    <div id="buttonpanel" class="container buttonpanel">
      <div class="row">
        <div class="box col">Filtri</div>
        <div class="box col">Filtri</div>
        <div class="w-100"></div>
        <div class="box col">Filtri</div>
        <div class="box col">Filtri</div>
      </div>
    </div>
    <div class="card-body">
      <div id="id" style="display: none;">2 </div>
      <h4 class="card-title">
        <a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
      </h4>
      <h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
      <p class="card-text">Phone: <a href="tel:9">9</a></p>
      <p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
      <p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
      <p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
      <div id="docbtngp" class="d-flex flex-row">
        <a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-user-edit"></i>
        </a>
        <a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-clipboard-list"></i> Waiting</a>
        <a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-check-circle"></i> Seen</a>
        <a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-book-open"></i> Register</a>
        <a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-check"></i> Checkin</a>
        <a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-th-large"></i> Consultation Time</a>
      </div>
    </div>
  </div>
</div>

CSS:

.box {
  background-color: #3C8DBC;
  color: #fff;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

.buttonpanel {
  position: relative;
  right: 0;
  height: 100%;
  top: 0px;
  margin-right:  0;
  margin-bottom:  0;
  margin-top:  0;
}

h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}

This is how my output appears:

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

codepen

The desired outcome is as follows:

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

htmlcssbootstrap-4

Answer №1

To organize the page layout, I rearranged the two large <div> elements into one row and then divided them into two columns using <div class="col-md-6">. You can view my code below:

 <!-- HTML code goes here -->

I have provided an example of a flex layout for your reference. Please note that adjustments may be needed for optimal display:

 <!-- HTML code for flex layout goes here -->

Answer №2

Revise the grid layout and update the CSS styling.

HTML:

<div class="row">
      <div class="box col-sm-2">Button Text</div>
      <div class="box col-sm-4">Button Text</div>
      <div class="box col">Button Text</div>
 </div>
 <div class="row">
      <div class="box col-sm-2">Button Text</div>
      <div class="box col-sm-4">Button Text</div>
      <div class="box col">Button Text</div>
 </div>
 <div class="row">
      <div class="box col-sm-2">Button Text</div>
      <div class="box col-sm-4">Button Text</div>
      <div class="box col">Button Text</div>
 </div>

CSS:

.box {
     background-color: #3C8DBC;
     color: #fff;
     text-align: center;
     margin: 2px;
 }

.buttonpanel {
     position: absolute;
     right: 0;
     height: 100%;
     width: 45%;
     top: 0px;
}

h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}
.row {
    height: 33%;
}

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

Changing the Speed of CSS3 Transitions Dynamically

As I am working with CSS3 Transitions, my current query pertains to initiating the animation with: -webkit-transform: translate3d(-100%, 0, 0); Is there a method to augment the predetermined speed set using: -webkit-transition: all 10s linear; This tim ...

javascriptcss

Setting a maximum value for an input type date can be achieved by using the attribute max="variable value"

Having trouble setting the current date as the "max" attribute value of an input field, even though I can retrieve the value in the console. Can anyone provide guidance on how to populate the input field with the current date (i.e max="2018-08-21")? var ...

htmlangulartypescript

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

TCPDF's background color feature

Is it feasible to color the cell of a TCPDF table only if it contains data? In the image provided, I am looking to shade the blocks in gray if they have data. Please refer to the following code image for more details: https://i.sstatic.net/Qm2WV.png ...

htmlcsstcpdf

Develop interactive card collections in Bootstrap that adapt to different screen sizes

I am currently working on developing a responsive card deck using Bootstrap. The goal is to have the card deck display one card per row on mobile, 2 cards per row on tablet, and 3 cards per row on desktop. Below is the snippet of the code I am using: < ...

csstwitter-bootstrapbootstrap-4

Facing difficulties with the XPATH due to an inability to access specific parts of the HTML code

Currently, I am facing an issue where I need to click on a link using Selenium and Java. When searching for the link using XPath, I am encountering a problem where only white spaces are displayed instead of most of the webpage content. The highlighted link ...

javahtmlseleniumxpath

Is jQuery utilized by the bootstrap-grid system?

Finale: In our current setup, we are utilizing Angular 9, and like many frontend frameworks, there is a preference against incorporating other JavaScript libraries alongside the framework for manipulating the DOM. The Challenge: I am hesitant to include ...

javascriptjqueryangulartwitter-bootstrapbootstrap-4

CSS3 variables causing issues

I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...

css

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

Change justify-content-between to something else

After successfully fixing the issue with aligning the navbar brand in the middle of my navigation bar, I am now facing a new challenge. I want to add a button right before the right navigation toggle, but all my attempts have been unsuccessful so far. I&ap ...

htmlcssbootstrap-5

The panel element is being encroached upon by a sidebar

I'm currently developing a basic chat application and I'm in need of a collapsible sidebar for users to select different chat rooms. Unfortunately, the current fixed sidebar is overlapping the panel element where the chat conversations are suppos ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to make an HTML table with a static header and a scrollable body?

Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...

javascriptasp.netjqueryhtml

Alternative method for concealing modal elements during initial page load

Picture a typical web application page that utilizes jQuery and Knockout to create modal dialogs for data editing. The process runs smoothly as the page loads, with the JS generating the dialogs when buttons are clicked. However, there is a slight issue wh ...

javascriptjqueryhtmlcss

`Use Swing to showcase the power of HTML5`

Many inquiries have been made on how to showcase HTML content in a swing application, yet there seems to be no library that fully supports html5 (especially for those who cannot afford JxBrowser). I possess locally stored html5 webpages and would like to ...

javahtmlswingjavafx-2

What is the most efficient way to group object values with the same property value into the same subarray using Javascript?

I need help with organizing data in an array. I have an array with 190 objects, each containing six keys and values, shown here: https://i.sstatic.net/a1gmh.png My objective is to create a new array that groups the values by year, like this: [ [2000 ...

javascripthtmlarrays

The total height of the document's body in jQuery is not equal to the sum of the viewport height and the window's scroll top position at the bottom of the document

Why does the document height appear smaller than the window scroll top value plus the viewport height when I reach the end of the document? Shouldn't they be equal? I've been struggling with this issue for hours and can't seem to figure it o ...

javascriptjqueryhtmlcssscrolltop

Looking to incorporate Slick Carousel as the main slider on my website for a dynamic hero section using JavaScript

Currently in the process of expanding my knowledge in javascript, I am now delving into setting up Slick Carousel. It is essential that it functions as a hero slider on my website. If you are interested in checking out Slick Carousel on github, feel free ...

javascripthtmljquerycssslick.js

Learning how to activate automatic sliding in a bootstrap carousel featuring 2 images and a video every 10 seconds

I am attempting to create a unique slider that combines both images and videos. Despite trying to implement it using bootstrap, I have been unsuccessful so far. See the code snippet below: <div id="carousel-slider" class="carousel slide carousel-fade ...

jqueryhtmlbootstrap-4slider

Divs have the tendency to shift downwards from their usual position while they are being displayed, accompanied by a subtle animation

When clicking on the elements with classes .next-arrow and .previous-arrow in this SSCCE, it hides and shows several elements with the class .item, four at a time (with four visible on the screen simultaneously). The desired effect is to animate the showi ...

javascriptjquerycssanimationjquery-animate

Position the outcome on the far right side

I have a question that I am revisiting with more details in hopes of finding a better solution. In the code snippet below, the output is aligned to the right of the row: <table border="1" style="width:100%"> <tr> <td align="right"> & ...

htmlcss