I need assistance organizing a set of cards on a webpage using Bootstrap 4. Can you help me with this task?

Looking for assistance in organizing cards on a web page using Bootstrap 4. Can anyone lend a hand?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
                card 01
            </div>
        </div>
        <div class=" col-xl-3 col-lg-4 ">
        <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
    card 01
    </div>
    <div class=" col-xl-3 col-lg-4 ">
        <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
            card 03
        </div>
        <div class=" col-xl-3 col-lg-4 ">
            <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
                card 04
            </div>
        </div>
    </div>
</div>

Attempting to replicate a Bootstrap 4 card design as shown in the provided image but facing some challenges. Any suggestions on how to correct this issue?

Current code snippet:

<div class="row">
    <div class="col-md-12  ">
        <div class="row">
            <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
                card 01
            </div>
        </div>
        <div class=" col-xl-3 col-lg-4 ">
            <div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0  bg-primary">
                card 01
            </div>
        </div>
    </div>
</div>

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

htmlcssbootstrap-4

Answer №1

For Bootstrap-v4, you can utilize the code snippet below to create a responsive layout:

[View on Full Page]

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="container py-3">
  <div class="row">
    <div class="col-sm-12 col-md-4 col-lg-3 py-3">
      <div class="card text-white bg-primary h-100 rounded-0 shadow-sm">
        <div class="card-body">
          <h5 class="card-title">Primary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-8 col-lg-9">
      <div class="row">
        <div class="col-sm-6 col-lg-4  py-3">
          <div class="card text-white bg-primary rounded-0 shadow-sm">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <!-- Additional card elements go here -->
      </div>
    </div>
  </div>
</div>

Answer №2

Utilize the container and row components based on Bootstrap's grid system. To ensure proper positioning of your cards, here is a sample code (Please run in full screen mode) that should result in a layout similar to this image https://i.sstatic.net/Vl3sZ.png

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>

<div class="container" style="width: 1240px !important; max-width: 960px !important;">
  <div class="row">
    <div class="col">
       <div class="card" style="width: 18rem; height: 100%">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">text</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
      <div class="row">
        <div class="card" style="width: 200px;">
              <img src="..." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">text</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
      </div>
    </div>
  </div>
</div>
</body>

Answer №3

It seems that utilizing flex classes could help you achieve the desired outcome.

<style>
    .box-1 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-bottom: 10px;
    }
    .box-2 {
    width: 200px;
    height: 210px;
    border: 1px solid red;
    }
</style>
<div class="container">
    <div class="row">
    <div class="col-md-12">
        <div class="d-flex">
        <div class="mr-3">
            <div class="box-2">card 01</div>
        </div>
        <div class="d-flex">
            <div class="mr-3">
            <div class="box-1">card 02</div>
            <div class="box-1 mb-0">card 05</div>
            </div>
            <div class="mr-3">
            <div class="box-1">card 03</div>
            <div class="box-1 mb-0">card 06</div>
            </div>
            <div>
            <div class="box-1">card 04</div>
            <div class="box-1 mb-0">card 07</div>
            </div>
        </div>
        </div>
    </div>
    </div>
</div>

Answer №4

You may want to check out the grid system in bootstrap

(View in full size)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container p-5">
  <div class="row">
    <div class="col-md-3">
      <div class="card text-white bg-primary h-100 p-2 m-1">
        <div class="card-body">
          <h5 class="card-title">Primary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №5

If you want to implement a grid system, the best approach is to create your own grid using columns and rows. By organizing your content in this way, you can easily control the layout of your elements on the webpage. Below is an example of a basic grid structure that you can follow (featuring sample content from G.W Kalpa Sathjana De Silva's code).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container p-5">
  <div class="row">
    <div class="col-md-3">
      <div class="card text-white bg-primary h-100 p-2 m-1">
        <div class="card-body">
          <h5 class="card-title">Primary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-primary p-2 m-1">
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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

Include a series of HTML attributes within an HTML element

I need to take a string of attributes that are formatted in valid HTML and apply them to a specific HTML element, rather than just creating a new string with those attributes. For instance, I have a variable named attributesStr that contains the string of ...

javascriptjqueryhtmlattributes

Differences between Absolute URLs in HTML files on Servers and in Local Environments

I have configured absolute paths for images on my website. The directory structure is as follows: Root Client -- Images ---a.png -- Index.html When using a.png in Index.html, I set the src as "/client/Images/a.png". This works fine on the serv ...

jqueryhtmlasp.netgoogle-chromeiis

Updating content in AngularJS based on the sidebar can be achieved by following these steps:

Yesterday, I posed a question about how to implement multiple views with Angular in order to have a header and sidebar. After receiving some helpful insights, I was able to make progress on creating a header and sidebar for my AngularJS App. You can view ...

javascripthtmlangularjsng-view

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

var original_role = $('option:selected', '#user_role').val(); $('#role_cancel').click(function() { //console.log(original_role); $('option:selected', '#user_role').removeAttr('selected'); //des ...

javascripthtmljquerydom

How many hyperlinks are there on this webpage?

Is there a way to determine the number of links on a web page without counting social media networks like Google, LinkedIn, Facebook, and Twitter? ...

phphtmldom

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate ...

jquerycss

Drawing images on a Canvas using specified coordinates: A step-by-step guide

https://i.stack.imgur.com/YkibI.jpg I've been trying to position images on specific coordinates, but I'm having trouble getting the shapes and angles right. Currently, only the top left corner is matching correctly. var _width, _height; var im ...

javascripthtmlimagehtml5-canvas

"Revealing the specific row and column of the selected element in each table when hovering over it

On my webpage, I have set up two tables positioned side by side like this: <!DOCTYPE html> <table> <tr> <td> <table> <tr><td>1</td><td>2& ...

jqueryhtmlcsshtml-tablehover

Issue with applying Angular animation to child element

Here I have set up two different animations. animations: [ trigger('fadeIn', [ transition('void => *', [ style({opacity: 0}), animate(500), ]), ]), trigger('fallIn',[ transition ...

htmlangulartypescriptanimation

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

javascriptcssajaxwordpresswoocommerce

Adjust the font size based on the width of the parent element

I'm in the process of designing a website that is intended to fully occupy the screen. To achieve this, I have used percentage-based dimensions for all elements. One specific element, a sidebar, has been set to be 30% of the browser window width via ...

jquerycsstypography

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

What is the alternative to using <strong> tags in HTML?

Is there a counterpart tag to <strong> in HTML, or is it expected to be included in the upcoming HTML5? ...

htmlxhtmltags

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

Do search engines crawl through JavaScript-generated keyword and description meta tags?

My website loads its template via ajax, with the description and keywords meta tags present on the template.html file rather than the current index.html page. Once the template is loaded, it embeds the meta tags into the index.html file. I'm wonderin ...

javascripthtmlajaxseometa-tags

Steps to trigger an action upon selecting a radio button on an HTML and CSS website

After creating a website with HTML and CSS that allows users to select options using radio buttons, I am now seeking advice on how to implement actions based on their choices. If a user selects an option, I want a specific action to occur, but I am unsur ...

javascriptphphtmlcss

Is it possible to change the CSS of a parent element using a child element?

My current challenge involves altering the background-color of a parent <td> element, without being able to directly modify the HTML structure. The software system utilized at my workplace strictly relies on SQL queries for data manipulation and gene ...

htmlcsssql

What causes certain images to have unspecified height and width measurements?

Currently, I am in the process of extracting image sizes from a website using a module called scraperjs. Most images have their height and width attributes defined, but some do not, resulting in the returned value being "undefined". How can I retrieve the ...

javascriptjqueryhtmlnode.jsimage