Struggling to align an element in HTML when used in columns?

Question

Struggling to align an element in HTML when used in columns?

<div class="row">
        <div class="col-lg-3 " style="border: groove;">
            <p class="circle col-xs-1 center-block">01</p>
            <h3>trending courses</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-3" style="border: groove;">
            <p class="circle text-center">02</p>
            <h3>books&library</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis
                tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit
                veritatis quam deleniti? Quasi dolor, asperiores ut cumque laboriosam accusamus eveniet esse. Officiis
                quidem perferendis qui.</p>
        </div>
        <div class="col-lg-1">

        </div>
        <div class="col-lg-3" style="border: groove;">
            <p class="circle">03</p>
            <h3>certified teachers</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
        </div>
    </div>

Utilized bs-5,bootstrap.bundle.min.css for styling
Here is the resulting output of the code https://i.sstatic.net/PVR4Y.png

3. Provided CSS code snippet below

.circle {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            padding: 10px;
            background: purple;
            border: 3px solid #000;
            display: flex;
            
            color: #fff;
            text-align: center;
            font: 28px arial, sans-serif;
            
        }

Attempted using various flex methods before adjusting margin to achieve desired layout

Please assist with troubleshooting why the current setup is not functioning correctly

html css bootstrap-5

Answer 1

Answer №1

Using <span style="font-style:italic;">text-align: center</span>

on your .circle element may not be effective since it only centers the text inside the element, not the element itself. If you wish to center the circle element, consider setting margins to auto for the element instead.

If utilizing flexbox is your preference, wrap your paragraph element with a div that has styles of display: flex and justify-content: center.

Answer 2

Using <span style="font-style:italic;">text-align: center</span>

on your .circle element may not be effective since it only centers the text inside the element, not the element itself. If you wish to center the circle element, consider setting margins to auto for the element instead.

If utilizing flexbox is your preference, wrap your paragraph element with a div that has styles of display: flex and justify-content: center.

Answer 3

Answer №2

Check out this flexbox-only approach:

.circle {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 10px;
  background: purple;
  border: 3px solid #000;
  display: flex;
  color: #fff;
  text-align: center;
  font: 28px arial, sans-serif;
}

<!-- Include Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f031f02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-3 " style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle col-xs-1 center-block">01</p>
    </div>
    <h3 class="text-center">trending courses</h3>
    <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
  </div>
  <div class="col-lg-1"></div>
  <div class="col-lg-3" style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle text-center">02</p>
    </div>
    <h3 class="text-center">books&library</h3>
    <p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit veritatis quam deleniti? Quasi...
  </div>
  <div class="col-lg-1">

  </div>
  <div class="col-lg-3" style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle">03</p>
    </div>
    <h3 class="text-center">certified teachers</h3>
    <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
  </div>
</div>

By enclosing each circle in a flexbox with justify-content: center;, all elements within the flexbox will be horizontally centered.

UPDATE: The original poster requested horizontal alignment for paragraph content as well.

Answer 4

Check out this flexbox-only approach:

.circle {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 10px;
  background: purple;
  border: 3px solid #000;
  display: flex;
  color: #fff;
  text-align: center;
  font: 28px arial, sans-serif;
}

<!-- Include Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f031f02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-3 " style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle col-xs-1 center-block">01</p>
    </div>
    <h3 class="text-center">trending courses</h3>
    <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
  </div>
  <div class="col-lg-1"></div>
  <div class="col-lg-3" style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle text-center">02</p>
    </div>
    <h3 class="text-center">books&library</h3>
    <p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit veritatis quam deleniti? Quasi...
  </div>
  <div class="col-lg-1">

  </div>
  <div class="col-lg-3" style="border: groove;">
    <!-- 👇 flexbox wrapper for circle -->
    <div class="d-flex justify-content-center">
      <p class="circle">03</p>
    </div>
    <h3 class="text-center">certified teachers</h3>
    <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
  </div>
</div>

By enclosing each circle in a flexbox with justify-content: center;, all elements within the flexbox will be horizontally centered.

UPDATE: The original poster requested horizontal alignment for paragraph content as well.

Answer 5

Answer №3

Employ this code snippet to perfectly align all components:

<div class="col-md-6 d-flex flex-row align-items-center justify-content-center"></div>

Answer 6

Employ this code snippet to perfectly align all components:

<div class="col-md-6 d-flex flex-row align-items-center justify-content-center"></div>

Answer 7

Answer №4

Consider implementing margin:auto in your CSS or m-auto in Bootstrap

Utilizing CSS

.circle {
        margin:auto
    }

To utilize Bootstrap, assign a class name to the div element as m-auto

<p class="circle text-center m-auto">02</p>

Answer 8

Consider implementing margin:auto in your CSS or m-auto in Bootstrap

Utilizing CSS

.circle {
        margin:auto
    }

To utilize Bootstrap, assign a class name to the div element as m-auto

<p class="circle text-center m-auto">02</p>

Answer 9

Answer №5

Utilizing Flexbox

Create a new class named dop for the parent element and chi for the child circle

<div className="col-lg-3 dop" style={{ border: "groove" }}>
        <p className="circle text-center chi">02</p>

Styling with CSS:

.dop {
  display: flex;
  flex-direction: column;
}
.chi {
  align-self: center;
}

Give it a try!

Answer 10

Utilizing Flexbox

Create a new class named dop for the parent element and chi for the child circle

<div className="col-lg-3 dop" style={{ border: "groove" }}>
        <p className="circle text-center chi">02</p>

Styling with CSS:

.dop {
  display: flex;
  flex-direction: column;
}
.chi {
  align-self: center;
}

Give it a try!

Struggling to align an element in HTML when used in columns?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way to adjust the font size of a select option?

The combination of two tags can create a powerful and impactful presence

Navigate to the following div, navigate back to the previous div

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

Displaying an array of data from a list of arrays in AngularJS' session storage

Styling the navigation bar using CSS

Tips for adjusting the height of a div element to completely occupy the unused portion of the viewport

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

CKEditor is removing tags and attributes when formatting HTML emails

Discovering the size of content through solely the height and width of a div: Is it possible?

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

Preventing selection of past dates with Material UI in ReactJS

Tips for interpreting Json data received from a WCF service in HTML with the help of AJAX technology?

Is it possible to import multiple versions of a JavaScript file using HTML and JavaScript?

PHP library dompdf is having issues when rendering CSS styles

Class Div is visible only within the jQuery Tab

Creating uniform heights for HTML column-based tables using divs in a React environment

What is the best way to eliminate the underline text decoration from a link element?

Is the image flickering non-stop when the button is pressed?

CSS alone has the power to make multiple elements react to a hover action on a div