Having trouble with Bootstrap 4 card image alignment within a tab panel

Encountering a challenge with nav-tabs nested within a card on a Bootstrap 4 webpage. My goal is to switch both the card text and the card-img-bottom simultaneously when toggling between nav-link options. To achieve this, I'm using a tab-pane that includes both the text and image for display. The switching functionality works well for the text and images. Additionally, with padding applied, the image appears in the card without left or right padding.

However, my current issue lies in aligning the image correctly at the bottom of the card.

<div class="container-fluid">
    <div class="card-deck mb-3 text-center">

        <div class="card box-shadow text-center">
            <div class="card-header">
                <h4 class="my-0 mb-3">Card A</h4>       
                <ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
                  </li>
                </ul>
            </div>
            <div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
                <div class="tab-pane fade pl-0 pr-0 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
                    <h4 class="card-title pl-3 pr-3">Some Text for Option A</h4>
                    <!--Card image at card bottom-->
                    <img class="align-bottom" src="img/ImageA.jpg">              
                    <!--/.Card image at card bottom-->
                </div>
                <div class="tab-pane fade pl-0 pr-0" id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
                    <h4 class="card-title pl-3 pr-3">Some Text for Option B</h4>
                    <!--Card image at card bottom-->
                    <img class="align-bottom" src="img/ImageB.jpg">              
                    <!--/.Card image at card bottom-->
                </div>
                <div class="tab-pane fade pl-0 pr-0" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
                    <h4 class="card-title pl-3 pr-3">Some Text for Option C</h4>
                    <!--Card image at card bottom-->
                    <img class="align-bottom" src="img/Grey.jpg">              
                    <!--/.Card image at card bottom-->
                </div>
            </div>
        </div>

        <div class="card mb-8 box-shadow">
            <div class="card-header">
                <h4 class="my-0">Card B</h4>
            </div>
            <div class="container-fluid">
            Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

    </div>
</div>

Here's how it looks with two cards side by side

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

htmlcsstwitter-bootstrapbootstrap-4vertical-alignment

Answer №1

To optimize the tab panel layout, wrap it in a div with classes d-flex and flex-wrap. Also, give the image tag the class mt-auto.

Check out the demo Here

<div class="container-fluid">
  <div class="card-deck mb-3 text-center">

    <div class="card box-shadow text-center">
      <div class="card-header">
        <h4 class="my-0 mb-3">Card A</h4>
        <ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
          </li>
        </ul>
      </div>
      <div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
        <div class="tab-pane fade h-100  show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
          <div class="d-flex flex-wrap h-100">
            <h4 class="card-title w-100 pl-2 pr-2">Some Text for Option A</h4>
            <img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
          </div>
        </div>
        <div class="tab-pane fade h-100 " id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
          <div class="d-flex flex-wrap h-100">
            <h4 class="card-title  w-100 pl-2 pr-2">Some Text for Option B</h4>
            <img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
          </div>
        </div>
        <div class="tab-pane fade  h-100" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
          <div class="d-flex flex-wrap h-100">
            <h4 class="card-title  w-100 pl-2 pr-2">Some Text for Option C</h4>
            <img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
          </div>
        </div>
      </div>
    </div>
    
    <div class="card mb-8 box-shadow">
      <div class="card-header">
        <h4 class="my-0">Card B</h4>
      </div>
      <div class="container-fluid">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in hendrerit in vulputate velit esse cillum dolore eu fugiat nulla pariatur. Thank you for your trust!
        
        Please let me know if I can assist you with anything else.</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

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

htmlcss

What is the best way to transfer data entered into a textbox through an onclick Alert event into a database?

UI https://i.stack.imgur.com/c2cqo.png Here is the PHP code I have been struggling with. It is meant to save input data into a database, but I can't seem to get it right: if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjc ...

javascriptphphtml

JavaScript Event Listener not Working Properly

I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thoroug ...

javascripthtmlcss

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

htmlcss

Ways to showcase flair in PHP code such as this

I currently have this code snippet: <h2 class="index-single">Tech Categories</h2><?php $args2 = array( 'cat' => 11 , 'posts_per_page' => 9 , 'paged' => $paged ); $the_query2 = new WP_Query( $args2 ); ...

javascriptphpjquerycss

Error loading .OBJ files in Three.js on Azure, but works fine locally

I've been using three.js for webGL to load .obj files, but I'm facing an issue when trying to load .obj files on Windows Azure with Windows Server 2008. I'm using Google Chrome browser and it's showing the error below: GET 404 (Not Fo ...

javascripthtmlazurethree.jswebgl

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Below is the HTML code for my website. I have managed to open the hamburger menu with the code, but I am facing an issue where it won't close. I have checked the HTML structuring using a validator and found no errors. Additionally, I have reviewed my ...

htmlcssfrontendbootstrap-5

Contact Form featuring a Text Area to complete the rest of the details

I am currently working on creating a contact form that has a design similar to the one shown below. However, I am facing challenges in getting the desired layout. I initially tried using flex-box but encountered issues with displaying the Text Area correct ...

css

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

htmlcssangularjs

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

htmlcss

Darkening effect observed in iOS Safari when applying CSS gradient on a background with similar color tone

I am facing an issue with the gradient overlay on my blue box. I want the overlay to fade from transparent to blue at the bottom of the box, creating a smooth transition for overflowing text. This is how it is supposed to appear (and does on most browsers ...

ioscsssafarigradient

What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem sta ...

htmlcssgridbootstrap-5

Transform Array into an unordered list with list items

Currently, I am dealing with a file that contains strings of file paths in the following format: ./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav ./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav ...

phphtmlarraysmultidimensional-arrayhtml-lists

Discovering over ten outcomes from the Google Search API

I've been attempting to retrieve more than 10 results from Google using the search API. I understand that the API only provides 10 results per call, so you need to make multiple calls to accumulate a larger number of results. However, I'm struggl ...

phphtmlsearch-enginegoogle-search-api

Modifying the theme of the Angular UI-Bootstrap datepicker

I am currently facing an issue with my angular datepicker, which is appearing oversized and covering almost 30% of the screen. Additionally, there are large gaps between the dates in the calendar view. After some investigation, I believe this problem may ...

javascriptangularjstwitter-bootstrapdatepicker

What's the best way to create flying text effects - using CSS or JavaScript

Looking for a way to enhance the user experience of my shopping cart on Android and iPhone/iPod, I want to implement a feature similar to the iTunes Store where the price flies down to the total when a purchase is made. Since I use jQuery (not UI) on this ...

javascriptandroidiphonecss

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

Using the html5-canvas element to drag connected lines

Here is an example of creating four points and connecting them: sample. My goal is to make it possible to drag the entire line connection when clicking on it, but when clicking on a circle, only that specific circle should be extended (already implemented ...

javascriptjqueryhtmlhtml5-canvas

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...

html