Unique creation of card deck using Bootstrap 4

Is there a way to create a card grid inside a container using Bootstrap 4? I'm having trouble understanding how to add text in the container if the text is within a div (card).

<section class="second__offers">
    <div class="container">
              <div class="card-group">
            <div class="card text-black">
                <img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>

example: https://i.sstatic.net/oYUyH.jpg

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Try utilizing background-image: in place of the img tag (assign a class to each card and utilize background-image: in CSS to make it fit)

To ensure your comment takes up 100% of the width, use container-fluid instead of container and apply the following CSS:

.container-fluid{
  padding:0!important;
  margin:0!important;
}

https://jsfiddle.net/nhybo32s/10/ 

.face{
     background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.body{
     background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
  padding:0!important;
  margin:0!important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
    <div class="container-fluid">
              <div class="card-group">
            <div class="card text-black face">
                <div class="">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black body">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>

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

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

javascripthtmlangularjs

Should WebSocket be used for inter-server communication in our HTML5 application?

My task is to create a solution for an existing system that requires secure two-way communication between multiple applications and services. The current setup is as follows: A HTML5 Kiosk application needs two-way communication to exchange data with a s ...

.nethtmlwebsocketnetwork-programmingtcp

How can I use jQuery to implement a progress bar for Iframes loading?

My job involves working on an intranet where I have a complex aspx page with multiple Iframes, all of which we control. Each iframe is dynamically set using JavaScript/jQuery by different buttons on the page. Some buttons set the src attribute for iframes ...

javascriptjqueryhtmliframeprogress-bar

Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...

javascriptcss

Challenges when utilizing col-md-push-*, col-md-pull-*, or col-md-offset-* classes in Bootstrap 4

My journey with Bootstrap is just beginning (currently using Bootstrap 4), and I'm encountering difficulties with col-*-push-*, as well as the pull and offset alternatives. For instance: col-md-push-9, col-md-pull-3, or col-md-offset-3. Despite updat ...

bootstrap-4

There are various buttons available for users to choose from on a page. How can I retrieve this selection data in JSON format?

I am designing a quiz with HTML buttons as options. How can I capture the user-selected button data before they click 'next' and format it into JSON? As there are multiple pages of questions, the data needs to be dynamically added to the JSON unt ...

javascripthtmljsonalpine.js

Creating a cross-platform file writer with PHP and JavaScript

My current challenge involves using buttons on an HTML page to trigger a PHP program that writes to a text file. Despite receiving a success message from my Ajax function, the file that should have been written to doesn't exist. Here's a snippet ...

javascriptphphtmlajax

Using VueJs and BootstrapVue, you can easily set up a table to delete items only on the

I have set up a page showcasing all my items in a BootstrapVue b-table. Each item has the option to be deleted. However, I encountered an unexpected issue when I enabled pagination using the b-pagination element and :per-page attribute. The problem arises ...

javascriptvue.jsbootstrap-4vuejs2bootstrap-vue

Getting the first element of ng-content in Angular 8

I am seeking to develop a multi-step form component that will showcase the ng-content gradually, one step at a time. This means that only one section of content should be displayed per step. The objective is to create a two-step form with the following co ...

javascripthtmlangular

Shifting elements within a modal using AngularJS and CSS: Swapping one div out for another

I am currently developing an application and I am considering using AngularJs for this purpose: <div class="main"> <div class="one">Content 1 goes here ...</div> <div class="two">Content 2 goes here ...</div> </div> Wi ...

javascripthtmlcssangularjs

Expand the list in both vertical and horizontal directions

I have a unique way I want this list to function: When clicked, it should reveal a vertical list. If an item in the vertical list is clicked, it should display horizontally with more information about that item. All items should be hidden until either Te ...

jqueryhtmlcsslistfold

Utilize JQuery's .append() method to insert a new element into the DOM and then trigger an "on click" event within

I am attempting to use the .append() method to add a new radio button, and then when I click on the new radio buttons, trigger a new function. However, I am having trouble achieving this with my current code: HTML: <label>Where should the photo be ...

javascriptjqueryhtmlappend

ScrollSpy Plugin in JQuery - Implementing automatic vertical text scrolling with dynamic height customization

I have been using this code to display the most recent user comments on my website, where some comments are concise while others are more lengthy. If you inspect the source code, you will notice that the height is set to 90px and overflow is set to hidden ...

cssjquery-ui

The function of the "enter/next" key on mobile browsers when inputting into a numeric field

I am working on a piece of code that only allows number inputs in a specific box. Previously, I used type="text", but this resulted in the full keyboard appearing on mobile browsers by default. To solve this issue, I switched to type="number". While mobile ...

javascriptjqueryhtmlformsmobile

Guide for scrolling to the top of a span located outside an iframe while working within the iframe

I have a website that is embedded within an iframe on another site. Unfortunately, the hosting site has set the iframe to a fixed height inside a span with a scroll bar (for unknown reasons). Is there a way for me to change the scrolling behavior of the ...

javascriptjquerycss

Display hidden divs using sliding effect in Javascript

Is there a way to incorporate a slide effect in order to reveal my hidden div? function toggleInfo() { var info = document.getElementById("info"); if (info.style.display === "none") { info.style.display = "block"; } else { ...

javascripthtmlcss

Interacting with dropdown menus on webpages through select box events

I am looking to create a unique scrollable drop-down menu on a webpage that includes select box features like hover on key press. For instance: Within my drop-down menu, there are approximately 100 elements, Apple Ant Ball Orange .... The menu should be ...

jquerybootstrap-4

asymmetrical bootstrap grid columns

I am working with the Bootstrap 4 grid system and have a layout with 3 columns. I want the first and third columns to be col-8, and the second column to be col-4, acting as a sidebar that falls between the first and third columns on small screens. However, ...

csstwitter-bootstrapbootstrap-4flexboxbootstrap-5

Transforming Google Maps from using jQuery to AngularJS

If I have a Jquery google map with find address and routing system, my goal is to convert it to an angular google map with more options. The current Jquery google map code looks like this: var directionsDisplay = new google.maps.DirectionsRenderer({ d ...

javascriptjqueryhtmlangularjsgoogle-maps

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

htmlcssfirefox