What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea0bea2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <br>
  <div class="row">
    <div class="col" style="background-color:#cbedca;">
      <div style="margin-top:80px;margin-bottom:80px;">
        <center>
          <h3>Ocean pollution is a massive environmental crisis.</h3>
          There is currently over 5.25 trillion macro and micro pieces of plastic in our oceans. Plastic bottles are a single-use plastic, meaning they are a product designed to be used only once and then discarded. CODi is committed to giving back to the environment
          in any way we can.
        </center>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
    </div>
    <div class="col" style="background-color:#d9f4ff;line-height:1em;">
      <div>
        <center>
          Made from
          <br><b style="font-size:3em;line-height:1em">30</b>
          <br><b>OCEAN-BOUND
            <br>PLASTIC BOTTLES</b>
        </center>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
    </div>
    <div class="col">
      <h4>Every day around 8 million pieces of plastic makes their way into our oceans.</h4>
      Once in the ocean, a single-use bottle moves with the currents of the wind and the ocean and can take <b>hundreds of years to break down into microplastic</b>.
    </div>
  </div>

</div>

Tried using the "align-middle" class on col divs but no success yet? Perhaps it's just a simple overlook or missing link that needs fixing.

htmlcssbootstrap-5

Answer №1

To achieve vertical alignment, consider making some adjustments to your html code and applying the CSS property align-items: center; to the parent div with the class "row".

Answer №2

To vertically center the contents of the cols, you can utilize d-flex and align-items-center, while horizontally centering them as a single flex item by placing them within a single 

<div class="text-center">
. Avoid using <center> as it is outdated:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c9789978b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <br>
  <div class="row">
<div class="col" style="background-color:#cbedca;">
  <div style="margin-top:80px;margin-bottom:80px;">
    <center>
      <h3>Ocean pollution is a massive environmental crisis.</h3>
      There is currently over 5.25 trillion macro and micro pieces of plastic in our oceans. Plastic bottles are a single-use plastic, meaning they are a product designed to be used only once and then discarded. CODi is committed to giving back to the environment
      in any way we can.
    </center>
  </div>
</div>
  </div>

  <div class="row">
<div class="col-6">
  <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
</div>
<div class="col d-flex align-items-center" style="background-color:#d9f4ff;line-height:1em;">
  <div class="mx-auto text-center">
    Made from
    <br><b style="font-size:3em;line-height:1em">30</b>
    <br><b>OCEAN-BOUND
      <br>PLASTIC BOTTLES</b>
  </div>
</div>
  </div>

  <div class="row">
<div class="col-6">
  <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
</div>
<div class="col d-flex align-items-center">
  <div class="text-center">
    <h4>Every day around 8 million pieces of plastic makes their way into our oceans.</h4>
    Once in the ocean, a single-use bottle moves with the currents of the wind and the ocean and can take <b>hundreds of years to break down into microplastic</b>.
  </div>
</div>
  </div>

</div>

Answer №3

Utilizing the power of flexbox seems to be the ideal approach in this scenario. It offers a flexible way to align elements according to your requirements and preferences.

  • Start by employing display: flex to make your element adaptable.
  • Use align-items: center to vertically align your items at the center.
  • Utilize justify-content: center to horizontally align your items at the center.

Avoid using <center>, as it is considered outdated.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011f011d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
  <br>
  <div class="row">
    <div class="col" style="background-color:#cbedca;">
      <div style="margin-top:80px;margin-bottom:80px;">
        <center>
          <h3>The issue of ocean pollution is a significant environmental crisis.</h3>
          Currently, our oceans harbor over 5.25 trillion macro and micro plastic pieces. Plastic bottles fall under single-use plastics category, designed for one-time use and disposal. CODi is dedicated to contributing back to the environment
          in every possible way.
        </center>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
    </div>
    <div class="col" style="background-color:#d9f4ff;line-height:1em; display: flex; align-items: center; justify-content: center;">
      <div style="text-align: center;">
          Crafted from
          <br><b style="font-size:3em;line-height:1em">30</b>
          <br><b>OCEAN-BOUND
            <br>PLASTIC BOTTLES</b>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
    </div>
    <div class="col" style="display: flex; align-items: center; flex-direction: column; text-align: center;">
      <h4>Approximately 8 million plastic pieces find their way to the oceans daily.</h4>
      <label>Once in the ocean, a single-use bottle drifts with winds and currents for <b>hundreds of years before breaking down into microplastics</b>.</label>
    </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

Alignment of Bootstrap 5 card text and buttons

I've been diving into the BootStrap 5 Crash Course from this YouTube link: https://www.youtube.com/watch?v=4sosXZsdy-s. The final website from the tutorial can be found here: One specific part focuses on using Cards, but I'm facing an issue wher ...

htmlcssbootstrap-5

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the tabl ...

htmlangularjscsssass

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

cssvariablestwitter-bootstrap

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Retaining the Chosen Tab upon Page Reload in Bootstrap 5.1

Struggling to maintain the selected tab active after page refresh. It's worth noting that I'm using Bootstrap 5.1 and have tried various solutions found for different versions without success. <ul class="nav nav-pills mb-3" id=&q ...

javascripttwitter-bootstrapbootstrap-4bootstrap-5

Materriel-UI ToggleButton has the appearance of a traditional button

Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution: const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5) ...

cssreactjsmaterial-ui

Making a linked div with background image

I'm attempting to turn the small icons on this particular page () into clickable links. Each icon is contained within its own div, but no matter what I do: <div class="social-btn pinterest"><a href="http://www.pinterest.com/etc.etc.">&l ...

csshtmlhyperlinkicons

Empty Firebase currentUser Redirected After Successful Sign In

I have a webpage named index.html which serves as the sign-in page. After a user successfully signs in, I want to redirect them to a new page called home.html, where their email will be displayed. However, I am encountering an issue with getting a null va ...

phphtmlfirebasefirebase-authentication

What causes the right column to break and move below the left column within a bootstrap row?

One thing that's been puzzling me is an issue I've encountered with a portal featuring two columns in a row. The top of the columns seems to display correctly, but as soon as I start scrolling down, the left column breaks and continues right from ...

htmlflaskjinja2bootstrap-5

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

How can the background color of a DIV be altered based on the values of an array's minimum

Basically, I am fetching values from an array using AJAX. The background color will change from green to red based on the "aht_value". Currently, the colors are displaying correctly because I hardcoded the values in the calculation below. However, I want t ...

javascriptphpjquerycssajax

Creating a Website that Adapts to Different Browser Sizes: Tips and Tricks

I am currently working on a website that features a video background (mp4 file). However, I noticed that the video appears differently in Chrome, Explorer, and Firefox. In order to ensure compatibility across all browsers, I need to make some adjustments i ...

javascriptjqueryhtml

Utilizing CSS attr() for setting the width dimension

I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it. What I'm attempting to do is use the attribute "prog" as th ...

css

Locating a particular table without an identifier

Recently, I've started working on a selenium project and I've encountered a roadblock. The webpage I am dealing with has three tables but I only need to extract data from one specific table. The challenge lies in the fact that all tables have the ...

javahtmlseleniumxpathhtml-table

Ways to prevent a div containing a lengthy content string from extending beyond other divs

Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...

htmlcsstwitter-bootstrap

Tips for displaying lower quality images while initially downloading higher quality versions

I need to download and display a large image in an img tag. Since the image is not Progressive JPEG, it will render as it downloads. Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML p ...

javascripthtmlcss

Adjusting Nested Divs based on the Content

One issue I'm facing is that the nested div ('content') isn't adjusting its height based on the actual content, specifically my form. The parent div adjusts its height but the child div doesn't. Any ideas on how to fix this? HTML: ...

csshtml

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

javascripthtmlvue.js