Issue with aligning Bootstrap 5 card tiles in a specific position

Question

Issue with aligning Bootstrap 5 card tiles in a specific position

Can anyone guide me on the correct way to use the Bootstrap 5 card component to display an attached image in a card view?

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body >

<!--Start main layout-->
<div class="wrapper">
    <div class="d-flex justify-content-center mt-5">
        <div class="">
            <div class="container">
            <div id="dynamic content" class="dynamic-content">
                <div class="row align-items-center animated flipInY slow delay-2s">
                    <div class="col-md-2 col-xs-12">
                        <div class="content" id="tile1">
                            <i class="fa fa-home fa-5x"></i>
                            <p>My Book</p>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="content" id="tile2">
                            <i class="fa fa-user fa-5x"></i>
                            <p>About</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="content" id="tile3">
                            <i class="fa fa-cogs fa-5x"></i>
                            <p>Services</p>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="content" id="tile4">
                            <i class="fa fa-comment fa-5x"></i>
                            <p>Feedback</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="content" id="tile5">
                            <i class="fa fa-briefcase fa-5x"></i>
                            <p>Portfolio</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="content" id="tile6">
                            <i class="fa fa-envelope fa-5x"></i>
                            <p>Contact</p>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="content" id="tile7">
                            <i class="fa fa-quote-right fa-5x"></i>
                            <p>Free Quote</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<!--End of main layout-->
</body>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</html>

Thankshttps://i.sstatic.net/JY4Y0.png

html css twitter-bootstrap bootstrap-5

Answer 1

Answer №1

Implement Bootstrap 5 grid system

To create rows, use the class .row, and for columns, use the class .col.

According to Bootstrap 5's official documentation: Each row has 12 template columns that can be utilized to arrange elements in any desired configuration.

I have used the .col-3 class four times to create four primary "sections." These four instances of .col-3 collectively occupy a maximum of 12 columns per row (i.e. 3 * 4 = 12). Within these four main "sections," there are multiple instances of .row and .col.

Choosing the appropriate .col classes

For creating layouts, use .col-5 and .col-11 in the following manner:

Use two instances of .col-5 within the same .row if you wish to display two boxes side by side.
Use one instance of .col-11 within the same .row for displaying one box in a row.

Reasoning behind the selection of .col-5 and .col-11

The choice of .col-5 over .col-6 becomes evident when positioning two columns within the same row. Using .col-6 would eliminate the spacing between the columns, as each column occupies 6 units, summing up to the maximum allowable 12 units. Conversely, .col-5 leaves room for spacing, with 5 units being occupied by each column, resulting in a total of 10 units.

Using two instances of .col-5 within the same .row:

Using two instances of .col-6 within the same .row:

When utilizing .col-5 twice in a single .row (as depicted in the first image), the columns are automatically spaced apart.

Opt for .col-11 for aesthetic purposes. Placing .col-11 alongside a row containing two .col-5 columns ensures equal width for both rows. This parity in width can be further emphasized by including .d-flex .justify-content-around in all relevant rows. More details can be found in the documentation.

Additional Recommendations

To horizontally align content, utilize the class .d-flex .justify-content-center, and for vertical alignment, use .d-flex .align-items-center. These classes can be instrumental in centering content, such as Font Awesome icons and titles, horizontally and vertically simultaneously within the designated boxes.

For text alignment within boxes, encompass the Font Awesome icon and the title with

<div class='text-center'>...</div>

, ensuring that the text is centered.

At the end of the HTML document, add an image and apply CSS modifications including:

position: absolute; and z-index: -100; for background placement,
width: 100vw; and height: 100vh; for full-screen display, and
filter: blur(50px); for adding a blur effect.

The Code Snippet

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 100vw;
  height: 100vh;
}

#inner_wrapper {
  margin-top: -15vh;
  margin-left: 10%;
}

.row {
  margin: 0;
  width: 100%;
  height: 15vh;
  /* Set this value the same as the margin-top for the #inner_wrapper. */
}

.col-5,
.col-11 {
  border-radius: 1vw;
}

.fa-home {
  font-size: 2.5vw;
  color: white;
}

#white {
  font-size: 1vw;
  color: white;
}

...

<!DOCTYPE html>
<html lang='en'>

<head>
  ...
</head>

<body>

  ...
  
</body>

</html>

Answer 2

Implement Bootstrap 5 grid system

To create rows, use the class .row, and for columns, use the class .col.

According to Bootstrap 5's official documentation: Each row has 12 template columns that can be utilized to arrange elements in any desired configuration.

I have used the .col-3 class four times to create four primary "sections." These four instances of .col-3 collectively occupy a maximum of 12 columns per row (i.e. 3 * 4 = 12). Within these four main "sections," there are multiple instances of .row and .col.

Choosing the appropriate .col classes

For creating layouts, use .col-5 and .col-11 in the following manner:

Use two instances of .col-5 within the same .row if you wish to display two boxes side by side.
Use one instance of .col-11 within the same .row for displaying one box in a row.

Reasoning behind the selection of .col-5 and .col-11

The choice of .col-5 over .col-6 becomes evident when positioning two columns within the same row. Using .col-6 would eliminate the spacing between the columns, as each column occupies 6 units, summing up to the maximum allowable 12 units. Conversely, .col-5 leaves room for spacing, with 5 units being occupied by each column, resulting in a total of 10 units.

Using two instances of .col-5 within the same .row:

Using two instances of .col-6 within the same .row:

When utilizing .col-5 twice in a single .row (as depicted in the first image), the columns are automatically spaced apart.

Opt for .col-11 for aesthetic purposes. Placing .col-11 alongside a row containing two .col-5 columns ensures equal width for both rows. This parity in width can be further emphasized by including .d-flex .justify-content-around in all relevant rows. More details can be found in the documentation.

Additional Recommendations

To horizontally align content, utilize the class .d-flex .justify-content-center, and for vertical alignment, use .d-flex .align-items-center. These classes can be instrumental in centering content, such as Font Awesome icons and titles, horizontally and vertically simultaneously within the designated boxes.

For text alignment within boxes, encompass the Font Awesome icon and the title with

<div class='text-center'>...</div>

, ensuring that the text is centered.

At the end of the HTML document, add an image and apply CSS modifications including:

position: absolute; and z-index: -100; for background placement,
width: 100vw; and height: 100vh; for full-screen display, and
filter: blur(50px); for adding a blur effect.

The Code Snippet

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 100vw;
  height: 100vh;
}

#inner_wrapper {
  margin-top: -15vh;
  margin-left: 10%;
}

.row {
  margin: 0;
  width: 100%;
  height: 15vh;
  /* Set this value the same as the margin-top for the #inner_wrapper. */
}

.col-5,
.col-11 {
  border-radius: 1vw;
}

.fa-home {
  font-size: 2.5vw;
  color: white;
}

#white {
  font-size: 1vw;
  color: white;
}

...

<!DOCTYPE html>
<html lang='en'>

<head>
  ...
</head>

<body>

  ...
  
</body>

</html>

Answer 3

Answer №2

Unique Bootstrap Card Solution

^{crafted with minimal CSS}

The Structure

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

With Custom Styling

Utilizing JavaScript for automation, but adaptable with CSS

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Enhanced with Content

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Optimized for Responsiveness

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Answer 4

Unique Bootstrap Card Solution

^{crafted with minimal CSS}

The Structure

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

With Custom Styling

Utilizing JavaScript for automation, but adaptable with CSS

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Enhanced with Content

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Optimized for Responsiveness

const colors = ["#2C78E2", "#43BB88", "#E27B2D"...;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}

<html lang="en">
...
</html>

Issue with aligning Bootstrap 5 card tiles in a specific position

Answer №1

Implement Bootstrap 5 grid system

Choosing the appropriate .col classes

Reasoning behind the selection of .col-5 and .col-11

Additional Recommendations

The Code Snippet

Answer №2

Unique Bootstrap Card Solution

The Structure

With Custom Styling

Enhanced with Content

Optimized for Responsiveness

Similar questions

AngularJS provides a convenient way to vertically populate data cells in a table

Boxes not occupying entire vertical space

Insufficient width of images in the bootstrap carousel

The HTML required attribute seems to be ineffective when using AJAX for form submission

Mixing together an array of colors, experimenting with adding a touch of transparency

Creating a unique carousel design using only CSS in Bootstrap

Having difficulties setting up the bootstrap-table with Rails 6, webpack, and Bootstrap 5. Despite my efforts, it keeps defaulting to Bootstrap 4 version on

Adjusting the gutter size for specific components in Bootstrap 4 using a mixin

Is it permissible to have <ul> tags within an H1 element?

Navigating the Foundation Topbar - Should I Toggle?

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Fast method or tool for generating a detailed CSS element list from deeply nested elements

Creating interactive comments in Vue 3 using dynamic rendering

Struggling with React Js and need some assistance?

Several DIV elements lined up side by side

Display a sneak peek on a separate tab

What are some ways I can troubleshoot my contact form?

The table is hidden and the buttons are unresponsive when inserted using jQuery

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?