Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue:

The initial design is displayed in Picture 1:

I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently struggling.

Picture 2 showcases what I have come up with so far:

Even after trying flexbox, I couldn't find a suitable solution.

<div class="col-lg-6 col-md-1">
 <div class="row">
  <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
  <h3 class="facts-header col-lg-2 col-md-12">
   Light
  </h3>
  <p class="facts-p col-lg-6 col-md-12 facts-text">
   The central element in our lives. It evokes emotions, influences our well-being, and replenishes our energy stores. Through light, we perceive different colors. Light creates ambience.
  </p>
 </div>
</div>
cssbootstrap-5

Answer №1

Your format seems to be off. You should have a row surrounding the immediate col's, followed by another row for the subsequent col. Consider this:

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265348574855">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-2 d-flex align-items-center justify-content-center">
          <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
        </div>
        <div class="col-sm-10">
          <h3 class="facts-header col-lg-2 col-md-12">
            Light
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
            The central element in our lives. It awakens emotions, influences our well-being, and replenishes our energy stores. Through light, we perceive different colors. Light creates ambiance.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-2 d-flex align-items-center justify-content-center">
          <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
        </div>
        <div class="col-sm-10">
          <h3 class="facts-header col-lg-2 col-md-12">
            Light
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
            The central element in our lives. It awakens emotions, influences our well-being, and replenishes our energy stores. Through light, we perceive different colors. Light creates ambiance.
          </p>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec1dec3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

To get a clear overview. Here is the suggested class structure:

.Container 
   . row //main row
      .col //block for Lighting  
        .row // wrapper for Lighting
          .col // column for circular object
          .col // column for text content
             .row // for title of Lighting
             .row // for description 

      .col // column for Design 
        .row // wrapper for Design
          .col // column for circular object
          .col // column for text content
             .row // for title of Design
             .row // for description

Answer №3

Media object implementation is worth a try

Sample 1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="flex-shrink-0">
   <img src="https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class="mr-3"  width="150" alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
  <h5 class="mt-0">Media heading</h5>
   <p>
   This is some content from a media component. You can replace this with any content and adjust it as needed.
   </p> 
  </div>
</div>

Sample 2

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d8698869a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-3">
          <img src="https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class="mr-3 img-fluid"  alt="...">
        </div>
        <div class="col-sm-9">
          <h3 class="facts-header col-lg-2 col-md-12">
            heading
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
           This is some content from a media component. You can replace this with any content and adjust it as needed.
          </p>
        </div>
      </div>
    </div>
</div>

Answer №4

You can utilize the flex property to achieve this.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030455e405e42">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="d-flex flex-column flex-md-row p-4 w-100">
 <div class="d-flex flex-row align-items-center">
  <div class="p-2">
   <img src="https://place-hold.it/90" class="col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class="d-flex flex-column ">
  <h3 class="facts-header col-lg-2 col-md-12">
   Light
  </h3>
  <p class="facts-p col-lg-8 col-md-12 facts-text">
   The central element in our lives. It evokes emotions, influences our well-being,
   and replenishes our energy stores. Through light, we perceive different colors.
   Light creates ambiance.
  </p>
  </div>
 </div>
 
 <div class="d-flex flex-row align-items-center">
  <div class="p-2">
   <img src="https://place-hold.it/90" class="col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class="d-flex flex-column ">
  <h3 class="facts-header col-lg-2 col-md-12">
   Light
  </h3>
  <p class="facts-p col-lg-8 col-md-12 facts-text">
   The central element in our lives. It evokes emotions, influences our well-being,
   and replenishes our energy stores. Through light, we perceive different colors.
   Light creates ambiance.
  </p>
  </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

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

Applying CSS classes to a custom AngularJS directive: A step-by-step guide

Need to have a CSS class called tab for the nav HTML element, which will be used as a directive: <nav tab></nav> The expected interpretation is: <nav class="tab"> <a></a> <a></a> <a></a> ...

javascripthtmlcssangularjsangularjs-directive

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

How can you incorporate a horizontal line beneath your text, similar to the one shown in the

https://i.sstatic.net/OzMVr.jpg I have a code snippet that needs a horizontal border similar to the one shown in the image <section class="about"> <div class="container"> <h1 class="text-center"> ...

htmlcsstwitter-bootstrap

Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...

htmlcssreactjsnext.jsserver-side-rendering

Firefox is not rendering HTML5 elements properly

While my website performs well in Chrome and Safari, there seems to be an issue with how elements are displayed in Firefox or IE. Some elements are being pushed to the right, and I am unsure of how to fix this problem. You can view the site here To aid i ...

jquerycsshtml

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

jQuery: Extracting text labels from checkboxes

My custom select dropdown includes checkboxes that are hidden until the user clicks on the dropdown: ---Select---- -option1- -option2- -option3- When a user clicks on the Select, the options appear as checkboxes. I want to be able to retrieve the labels ...

jqueryhtmlcsscheckbox

Utilizing the Jquery hover feature to reveal or conceal an element

My Hover function is designed to display and hide sub menus when a person hovers on them. The issue I'm facing is that the menu disappears when I move the mouse down towards it. Can someone help me identify what I am doing wrong here? ...

javascriptjqueryhtmlcss

Having trouble making SCSS mixins work with CSS variables in NextJS?

My current next.config.js setup looks like this: module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./styles'], ...

csssassnext.js

Break the page after generating specific charts with JQuery

I have a task to create multiple charts, where the first page needs to include a header and the first 8 charts. How can I insert a page break after the 8th chart and move on to a second page without a header? Each student has different subjects and score ...

jqueryhtmlcss

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

javascriptcssangulardrag-and-droptranslate3d

Ensure that all floating divs have uniform height

How can I ensure that two divs placed side by side will always have the same height, even when one of them changes based on content, using only CSS? I created a fiddle to demonstrate. I want both the red and blue divs to have equal heights... http://jsfi ...

htmlcss

Accessing web authentication through VBA

Having some difficulties trying to access my webtext account through VBA. The first hurdle I faced was identifying the tags for the username and password input boxes. After using inspect elements, it seems like the tags are "username" and "password." Howe ...

htmlcssexcelvba

As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered ...

htmlcssvue.jsbootstrap-4font-awesome

Is it possible to have square corners on the Vuetify Mobile Drawer component?

Currently, I am working with the Vuetify mobile drawer component and my goal is to give it square corners instead of the default rounded corners that are prevalent in Material design for all Vuetify components. While the Vuetify card component offers a " ...

cssvue.jssassvuetify.js

Bootstrap's inline form features a button on a separate line from the rest of the form

I grabbed this code directly from bootstrap's official documentation: <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="inp ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...

javascripthtmlcssvue.jsfigma

a tag's functionality remains unchanged by its class association

In my Laravel project, I am attempting to create an active class for a link tag, but the class is not affecting the link. Below is the code snippet from my blade file: <li class="{{ (request()->is('categories*')) ? 'side-active&ap ...

cssbootstrap-4laravel-blade