How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

Question

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and vertically aligned on smaller devices. My knowledge of CSS is limited, but I believe Flexbox might be the solution. Can you guide me on how to achieve this?

The goal is for the layout to look like the one on the Coinbase website. On larger screens, the content should appear in rows, while on smaller screens, it should switch to columns. Is there a Bootstrap class that can simplify this process? I am using Bootstrap for my project.

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

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <title>Document>

    <style>
        .container {
            background: dodgerblue;
        }

        .section {
            display: flex;
            flex-shrink: 0;
            width: 100%;
            max-width: 1180px;
            margin: 0px auto;
            padding: 24px;
        }

        .box {
            display: flex;
            flex: 1 1 auto;
            flex-direction: row;
            justify-content: center;
            color: rgb(255, 255, 255);
            margin: 40px 0px;
        }

        h2 {
            margin: 0px 0px 12px;
            line-height: 48px;
            font-size: 56px;
            font-weight: 500;
        }

        .divChild {
            line-height: 24px;
            font-size: 16px;
            opacity: 0.7;
        }

        .divChildBox {
            flex: 1 1 0%;
            text-align: center;
            flex: 1 1 0%;
            text-align: center;
            flex: 1 1 0%;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="container">
        <section class="section">
            <div class="box">
                <div class="divChildBox">
                    <h2>$320B+</h2>
                    <div class="divChild">Total Volume Traded</div>
                    <div class="divChildBox">
                        <h2>100+</h2>
                        <div class="divChild">Countries supported</div>
                        <div class="divChildBox">
                            <h2>35M+</h2>
                            <div class="divChild">Verified users</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</body>

</html>

html css

Answer 1

Answer №1

If you want to showcase your content in a row instead of a column, consider using the flex property. Simply place all your display items within div child elements. Flex naturally aligns horizontally, eliminating the need to specify a direction unless it needs to be altered. Therefore, encapsulate your h2 and smaller text-holding divs within a parent div with the flex display, where additional flex properties can be applied.

In the parent class, I included

display: flex; justify-content: space-around; align-content: center;

. To enhance clarity in your HTML, use p tags instead of divs whenever possible.

By assigning the class to the parent element, you can easily target both the parent and its children using CSS selectors. This simplifies styling multiple elements simultaneously, resulting in cleaner HTML structure. For instance, you could modify multiple elements with one block of code like .parent h2 or .parent p.

Flexibility with responsiveness is achieved through utilizing media queries alongside flex properties. Unlike traditional block elements manipulated with media queries, flexbox provides a flexible container ideal for mobile screens and dynamic layouts. Incorporating media queries into your CSS ensures adaptability across various devices. For more insights on media queries, check out this informative article from a reputable source called CSS Tricks.

If this doesn't align with your objectives, feel free to clarify further.

* {
  margin: 0;
  padding: 0;
}

#main section div {
   color: rgb(255, 255, 255); 
   margin: 40px 0px; 
}

.parent {
  display: flex;
  justify-content: center;
  align-content: center;
}

.parent h2 {
  margin: 0px 0px 12px;
  line-height: 48px;
  font-size: 56px;
  font-weight: 500;
}

.parent p {
  line-height: 24px;
  font-size: 16px;
  opacity: 0.7;
}

@media (max-width:499px) {

  #main section div {    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .parent {
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
}

<div id="main" style="background: rgb(22, 82, 240);">
  <section style="width: 100vw; padding: 24px">
    <div>
      <div class="parent">
        <div>
          <h2>$320B+
          </h2>
          <p>
            Total Volume Traded
          </p>
        </div>

        <div>
          <h2>
            100+
          </h2>
          <p>Countries supported
          </p>
        </div>

        <div>
          <h2>
            35M+
          </h2>
          <p>
            Verified users
          </p>
        </div>
      </div>
    </div>
  </section>
</div>

I recommend separating your HTML and CSS for better organization. Avoid inline styles by creating classes that are defined once in your CSS file or style tag. By adding these classes to your HTML attributes, any necessary changes can be made centrally within your CSS.

Answer 2

If you want to showcase your content in a row instead of a column, consider using the flex property. Simply place all your display items within div child elements. Flex naturally aligns horizontally, eliminating the need to specify a direction unless it needs to be altered. Therefore, encapsulate your h2 and smaller text-holding divs within a parent div with the flex display, where additional flex properties can be applied.

In the parent class, I included

display: flex; justify-content: space-around; align-content: center;

. To enhance clarity in your HTML, use p tags instead of divs whenever possible.

By assigning the class to the parent element, you can easily target both the parent and its children using CSS selectors. This simplifies styling multiple elements simultaneously, resulting in cleaner HTML structure. For instance, you could modify multiple elements with one block of code like .parent h2 or .parent p.

Flexibility with responsiveness is achieved through utilizing media queries alongside flex properties. Unlike traditional block elements manipulated with media queries, flexbox provides a flexible container ideal for mobile screens and dynamic layouts. Incorporating media queries into your CSS ensures adaptability across various devices. For more insights on media queries, check out this informative article from a reputable source called CSS Tricks.

If this doesn't align with your objectives, feel free to clarify further.

* {
  margin: 0;
  padding: 0;
}

#main section div {
   color: rgb(255, 255, 255); 
   margin: 40px 0px; 
}

.parent {
  display: flex;
  justify-content: center;
  align-content: center;
}

.parent h2 {
  margin: 0px 0px 12px;
  line-height: 48px;
  font-size: 56px;
  font-weight: 500;
}

.parent p {
  line-height: 24px;
  font-size: 16px;
  opacity: 0.7;
}

@media (max-width:499px) {

  #main section div {    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .parent {
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
}

<div id="main" style="background: rgb(22, 82, 240);">
  <section style="width: 100vw; padding: 24px">
    <div>
      <div class="parent">
        <div>
          <h2>$320B+
          </h2>
          <p>
            Total Volume Traded
          </p>
        </div>

        <div>
          <h2>
            100+
          </h2>
          <p>Countries supported
          </p>
        </div>

        <div>
          <h2>
            35M+
          </h2>
          <p>
            Verified users
          </p>
        </div>
      </div>
    </div>
  </section>
</div>

I recommend separating your HTML and CSS for better organization. Avoid inline styles by creating classes that are defined once in your CSS file or style tag. By adding these classes to your HTML attributes, any necessary changes can be made centrally within your CSS.

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

Answer №1

Similar questions

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

The process of deleting lines from an image using Javascript

Exploring Angular Material Design's method for vertically populating a column

Finding the webpage URL where a form element is located

The bottom border of the check boxes is not displaying in Internet Explorer

Tips for aligning two objects side by side in HTML

I'm having trouble retrieving a list of elements from a Python class in order to showcase them in an HTML file

CSS styling for the dropdown list in the content/option section

Can you determine the height of an image if only the width and border width are provided?

Using jQuery to dynamically populate a list with the information from a JSON dataset

Switching the background hue of the chat box after each message

How can I position two divs side by side within an Appbar?

Lines that are next to each other within an svg path and have a stroke

What is the best way to iteratively fade in data from a MySQL database one by one?

"Internet Explorer: Unleashing the Magic of Card Fl

Discover additional and subtract options

Ensuring HTML5 validation in Ionic

How can you use ES6 pure Javascript to set the src attribute of an html collection of images from an array of paths as values for each image?

What is the best way to deactivate div elements once an overlay has been applied to them?

The tabs in Bootstrap 5.0 seem to be malfunctioning as they are displaying different tab information when clicked on