What is the best way to position text on top of a deck of cards?

Question

What is the best way to position text on top of a deck of cards?

looking for this

current status

this is my code:

<div class="card-deck test">
    <div class="card-group mx-auto test2">
        <div class="d-flex align-items-start overviewHeader">
            <h2>Overview</h2>
        </div>
        <div class="card overviewCard text-center">
            <div class="card-body align-items-center d-flex">
                <div>
                <!-- Content here -->
                </div>
            </div>
        </div>
        <!-- More cards here -->
    </div>
</div>

The CSS classes test, test2 are used to illustrate borders, the overviewHeader class styles the header, and the overviewCard class styles the card.
How can I position the header above and at the start of the card deck, similar to the first image provided?

Thank you in advance.

html css bootstrap-4

Answer 1

Answer №1

The flexbox property

<div class="d-flex align-items-start overviewHeader">

from bootstrap is wrapping the heading <h2>Überblick</h2>.

This is causing it to display inline.

To fix this, remove <h2>Überblick</h2> from those divs and place it at the top instead.

Answer 2

The flexbox property

<div class="d-flex align-items-start overviewHeader">

from bootstrap is wrapping the heading <h2>Überblick</h2>.

This is causing it to display inline.

To fix this, remove <h2>Überblick</h2> from those divs and place it at the top instead.

Answer 3

Answer №2

To achieve the desired layout, consider using flex-box.

Start by creating a parent div with a height and width set to 100%.
Add display: flex and justify-content: center; to align the content in the center.
Next, create another div to contain the cards and adjust its width to less than 100%. Apply display:flex and justify-content: space-between. This will evenly distribute the cards with equal spacing. Refer to this link for more information.
Insert div elements inside the parent divs. Style the cards with properties like max-width, height, and a subtle box-shadow. Customize the colors based on your preference. You can view an example of this design here.

The code snippet below demonstrates a responsive and scaled-down version of the layout:

body,
html {
  height: 300px;
}

.card-deck {
  height: 100%;
  width: 100%;
  display: flex;
  background: #ecf0f1;
  justify-content: center
}

.card-group {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecf0f1;
}

.notification {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: #3498db;
  position: absolute;
  top: -15px;
  left: -10px;
}

.overviewHeader {
  max-width: 20%;
  max-height: 50%;
  padding: 20px;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
  -moz-box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
  box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
}

.overviewHeader h2 {
font-size:15px;
  text-align: center;
}

.text-center {
  width: 100%;
  text-align: center;
}

.some-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: #bdc3c7;
  display: block;
  margin: 0px auto;
}

<div class="card-deck test">
  <div class="card-group mx-auto test2">
    <div class="d-flex align-items-start overviewHeader">
      <div class="notification"></div>
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div class="text-center">
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

To achieve the desired layout, consider using flex-box.

Start by creating a parent div with a height and width set to 100%.
Add display: flex and justify-content: center; to align the content in the center.
Next, create another div to contain the cards and adjust its width to less than 100%. Apply display:flex and justify-content: space-between. This will evenly distribute the cards with equal spacing. Refer to this link for more information.
Insert div elements inside the parent divs. Style the cards with properties like max-width, height, and a subtle box-shadow. Customize the colors based on your preference. You can view an example of this design here.

The code snippet below demonstrates a responsive and scaled-down version of the layout:

body,
html {
  height: 300px;
}

.card-deck {
  height: 100%;
  width: 100%;
  display: flex;
  background: #ecf0f1;
  justify-content: center
}

.card-group {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecf0f1;
}

.notification {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: #3498db;
  position: absolute;
  top: -15px;
  left: -10px;
}

.overviewHeader {
  max-width: 20%;
  max-height: 50%;
  padding: 20px;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
  -moz-box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
  box-shadow: 17px 6px 29px 0px rgba(214, 214, 214, 1);
}

.overviewHeader h2 {
font-size:15px;
  text-align: center;
}

.text-center {
  width: 100%;
  text-align: center;
}

.some-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: #bdc3c7;
  display: block;
  margin: 0px auto;
}

<div class="card-deck test">
  <div class="card-group mx-auto test2">
    <div class="d-flex align-items-start overviewHeader">
      <div class="notification"></div>
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div class="text-center">
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-start overviewHeader">
      <div class="some-image">
      </div>
      <h2>Overview</h2>

      <div class="card overviewCard text-center">
        <div class="card-body align-items-center d-flex">
          <div>
            Some Content;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What is the best way to position text on top of a deck of cards?

Answer №1

Answer №2

Similar questions

Displaying specific data points

Tips for making a screen adapt to different monitor resolutions

Gleaming R: Warning prompt or modal box input: invalid

An unsolicited border encompassing an image that does not resemble a CSS border or outline within the realm of Bootstrap 4

An error occurred: Reaching the maximum call stack size when utilizing the .map function in jQuery

What could be causing the constant issue of receiving an empty $_FILE when attempting to upload a file using ajax and php

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Creating a border with tabs and a triangle using CSS

Converting Uniquely Designed Photoshop Shapes into HTML

Another element concealing an element underneath

Our search box is showing suggested results but we are unable to access the specific product sku. What steps can we take to resolve this issue?

Ways to incorporate an image into an SVG file

Overlapping borders in Bootstrap 4 design

Ensure that each class element contains a value before using jQuery to toggle the disabled class

Ways to resolve the issue of undefined $route.current in AngularJS

Troubleshooting Challenges with JSON and jQuery Encoding

What is the best way for Selenium in C# to identify and locate a specific span element by its value

Discovering the amount of time a section of a webpage remains in view on a browser

Tips for preventing the direct copying and pasting of JavaScript functions

`Videos on youtube with elements overlapping each other`