Discover the technique for displaying the bootstrap card body information upon clicking a specific tab

In my angular project, I've incorporated bootstrap cards that display heading and horizontally arranged data (using horizontal cards).

component.html

<div class="bs-example">
    <div class="card" id="dd" style="max-width: 800px;">
        <div class="row no-gutters">
            <div class="col-sm-3" >
                <h5>heading 1</h5>
                <div class="card-body">
                    <p>info 1.1</p>                         
                    <p>info 1.2</p>                         
                </div>
            </div>
            <div class="col-sm-3" >
                <h5>heading 2</h5>
                <div class="card-body">
                    <p>info 2.1</p>
                    <p>info 2.2</p>

                </div>
            </div>
            <div class="col-sm-3" >
                <h5>heading 3</h5>
                <div class="card-body">
                    <p>info 3.1</p>
                    <p>info 2.2</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

I need to turn the headings into tabs, where clicking on a tab will reveal the corresponding data in a similar horizontal layout. If one heading has multiple data points, it should be displayed in separate cards following the initial card. I'm struggling with this setup as a beginner with bootstrap. Can anyone provide assistance?

I aim to showcase the information in horizontally positioned cars with each tab click, also displaying additional information if there are multiple data under one heading.

cssangulartwitter-bootstrapbootstrap-4

Answer №1

CSS classes provided by Bootstrap can be utilized to create tabs on a webpage.

<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">Tab 1</a>
    </li>
    <li class="nav-item">
        <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">Tab 2</a>
    </li>
    <li class="nav-item">
        <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">Tab 3</a>
    </li>
</ul>


<div id="content" class="tab-content" role="tablist">
    <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
        <div class="card-header" role="tab" id="heading-A">
            <h5 class="mb-0">
                <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                    Collapsible Section A
                </a>
            </h5>
        </div>

        <div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
            <div class="card-body">
                <p>Info 1.1</p>                         
                <p>Info 1.2</p>
            </div>
        </div>
    </div>

    <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
        <div class="card-header" role="tab" id="heading-B">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                    Collapsible Section B
                </a>
            </h5>
        </div>
        <div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
            <div class="card-body">
                <p>Info 2.1</p>
                <p>Info 2.2</p>
            </div>
        </div>
    </div>

    <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
        <div class="card-header" role="tab" id="heading-C">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
                    Collapsible Section C
                </a>
            </h5>
        </div>
        <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
            <div class="card-body">
                <p>Info 3.1</p>
                <p>Info 2.2</p>
            </div>
        </div>
    </div>
</div>

Sample Link

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 best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

htmlcss

What steps should I take to troubleshoot the ParseError related to the restriction of using 'import' and 'export' exclusively with 'sourceType: module' for importing UpgradeAdapter?

I have been working on upgrading an angular.js app to angular 2, following the guidelines provided at https://angular.io/docs/ts/latest/guide/upgrade.html. The application is already coded in Typescript, and we are using browserify and tsify for compiling ...

angularjsangulartypescriptbrowserifytsify

Issue with Angular polyfill in IE11: The core-js version 3.6.5 method es.string.split.js is having trouble parsing the regex /^|s+/ when used with

Angular 10, d3 5.16.0, and core-js 3.6.5 In the midst of it all, d3-drag triggers d3-dispatch, which in turn invokes a function called .parseTypenames. function parseTypenames(typenames, types) { return typenames.trim().split(/^|\s+/).map(functio ...

angularinternet-explorer-11polyfillscore-js

Expanding the content within the modal body in Twitter-Bootstraps does not increase its size

Here's the code snippet that I'm working with: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-conte ...

jquerycsstwitter-bootstrap

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

Utilize dynamic inline styling to pass asset image paths as background images in Nuxt.js

I am in the process of developing a Nuxt.js application and I have a requirement to dynamically set the background image of an element using images from the assets folder. Here is what I have implemented: <template> <div> <div v ...

cssvue.jswebpackassetsnuxt.js

Using RxJS to send a single API request from a function that could potentially be invoked multiple times

snippet controller: private updateSplitScreenService = () => { this.splitScreenService.emitNewState(this.products); this.splitScreenService.emitNewState(this.stores); }; splitScreenService: // In the code snippet above, a custom debounce fun ...

angularrxjsrxjs-observables

Exploring the Values of Foreign Keys

My models Offre and Recruteur are set up like this: @python_2_unicode_compatible class Recruteur(models.Model): name = models.CharField(max_length=50) def __str__(self): return "Recruteur: {}".format(self.name) @python_2_unicode ...

djangoangular

Is there a tool available for monitoring server status with HTML/CSS

I am interested in a way to create an HTML or CSS code that can ping an address or IP every 10 minutes to determine if it is sending back a signal. If a signal is received, I want the status on my website to display as 'online'. In case there is ...

htmlcss

Using Angular, you can incorporate a link declared in the controller directly into your template

Hey there everyone, hope you're having a good morning. As mentioned in the title I am looking to define a link as a string and then use it in the template. Below is the code snippet I have written for it .ts array=["<a href=\"https://exam ...

angular

Creating a transparent background in a three.js canvas: a step-by-step guide

I came across a wave particle animation on Codepen (https://codepen.io/kevinsturf/pen/ExLdPZ) that I want to use, but it has a white background. However, when I try to set the body background to red, it doesn't show up once the canvas is rendered. I ...

javascriptcssthree.js

What can I do to adjust the Navigation Item and Dropdown placement?

I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working. Here is the code: <script src=" ...

htmlcssnavigationbootstrap-5

Incorporating an additional stylesheet in Joomla

I recently created a Joomla website that heavily relies on the background image for its design. As such, I need to ensure there is an image available for every screen resolution. I've heard there's a simple solution for this, like adding a <l ...

htmlcssjoomla

Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...

csstwitter-bootstrapbootstrap-4responsive

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...

javascriptangulartypescript

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

The angular tube is malfunctioning, leading to the failure of the style to be applied

The styles defined in the CSS within the HTML content set by innerHtml are not showing up properly. I attempted to use bypassSecurityTrustHtml with a pipe, but it did not have the desired effect. Check out this Stack Overflow post for more information. ...

angularbootstrap-4

After deploying an Angular 7 application, it is unable to connect to the web API

My Angular 7 Application with .Net core 2.1 is facing an issue once it is published, as it cannot reach the API resulting in no calls being made. However, everything worked perfectly fine before I published the application. (I use IIS 10 Express when publi ...

angularvisual-studioiis.net-core

Empowering your Angular2 application with data binding

I am currently working with the following template: <table width="700"> <caption>All Users</caption> <thead> <tr> <th>name</th> <th>surname</th> < ...

angulartypescript

A div element with the class name "draggable" is

One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function: function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { console.log('Attem ...

javascriptjqueryhtmlcssjquery-ui