Tips for aligning a picture to the left side using Bootstrap's Grid System

I'm having trouble positioning my picture on the left side of the cards, as I am still learning how to use bootstrap

<div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Enrolled</div>
                            <div class="stat-digit"><?php //echo(!empty($totalCustomers)) number_format($totalCustomers,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course In Progress</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsLess7Years))?number_format($totalDocumentsLess7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div> 
                </div>
            </div> 
        </div>
        <div class="w-100 d-none d-md-block"></div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Completed</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsMore7Years))?number_format($totalDocumentsMore7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Certificates</div>
                            <div class="stat-digit"><?php //echo(!empty($totalArchive))?number_format($totalArchive,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6" class="trainees">
            <img src="https://www.thesprucepets.com/thmb/APYdMl_MTqwODmH4dDqaY5q0UoE=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg" alt="trainees" class="img-fluid">
        </div>
</div>

Could altering the columns help resolve this issue? I have tried placing them in the same row without success. Here is how it currently looks: view image here

htmlcssbootstrap-4

Answer №1

To position the image section to the left, add another div with class row after the cards and place the image inside it.

Here is the updated code:

<div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Enrolled</div>
                            <div class="stat-digit"><?php //echo(!empty($totalCustomers)) number_format($totalCustomers,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course In Progress</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsLess7Years))?number_format($totalDocumentsLess7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div> 
                </div>
            </div> 
        </div>
        <div class="w-100 d-none d-md-block"></div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Completed</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsMore7Years))?number_format($totalDocumentsMore7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
     </div>

      <div class="row">
         <div class="col-sm-6 col-lg-3" class="trainees">
               <img src="https://www.thesprucepets.com/thmb/APYdMl_MTqwODmH4dDqaY5q0UoE=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg" alt="trainees" class="img-fluid">
           </div>
      </div>  
       
  
</div>

The output will look like this. I hope this solution helps.

https://i.sstatic.net/Cp4zV.png

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

The POST method is failing to collect data from the form

Currently in the process of learning Web Design with HTML, PHP, and Javascript, I have taken on the challenge of creating my own website called MySite.html. Within this site, there is a sign-in screen that utilizes the POST method to send data to a file na ...

phphtmlforms

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...

jqueryhtmlselectinput

Issue with Bootstrap List Group Nested Links causing them to stop functioning after initial selection

I am trying to implement page navigation using the Bootstrap List-group class in HTML. However, I am facing an issue where the nested links 'Link 1' and 'Link 2' freeze after the first click. The desired functionality is as follows: ...

javascripthtmljquerybootstrap-4bootstrap-5

Is it possible to generate HTML form fields with fixed positions when using Orbeon forms?

Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...

javascripthtmlformsorbeon

All pictures aligned with overflow

The first container is working fine, displaying 2 images vertically, but when there are 6 images, it overflows. The problem lies with container 2, where I want to create a horizontal list of images with overflow (only horizontal). This is the current sta ...

css

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

Guide to incorporating JSON data into HTML through JavaScript

As I attempt to load data from a JSON file to .js and then to an HTML file, I am facing a challenge. While I can successfully load the JSON values into .js, I am unable to transfer the same values to HTML. Below is the code snippet - could anyone provide a ...

javascriptjqueryhtmljsonangularjs

Display Text Only When Selected - Material-UI

Is there a way to display only the selected tab's text? I came across this code snippet in the MUI documentation that involves showing labels on selection. How can I achieve this effect, maybe by manipulating the state to change the color of the selec ...

cssreactjsmaterial-ui

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

htmlcssiframe

Tips for watching .MP4 videos on Safari

After creating a website using WordPress, I encountered an issue with playing MP4 videos on Safari. The video works perfectly fine in Chrome, Mozilla, and IE, but not in Safari. I inserted the video using the HTML5 video tag, but it seems like there is a c ...

jqueryhtmlvideosafarimp4

What is the best way to duplicate a text using a button in ReactJS?

Hey there, I'm working with an array and trying to figure out how to copy the text in a p element ({item.adress} => this is part of an array item) when a button is clicked. Could you lend me a hand? import classes from './CryptoBox.module.css& ...

javascripthtmlreactjsfunctionreact-hooks

Mastering the art of integrating two applications in Django involves understanding how to properly

Hey there, I'm currently diving into Django and I have a question regarding making my two apps work together. Here's how my folders are structured: mysite/ --/app1 (blog app) --/app2 (a list of users that sign up with a form) --/mysite --db --m ...

pythonhtmldjango

Guide to showcasing two spring models within a single HTML table row utilizing Thymeleaf

I need help formatting a row to display in an HTML table: "$num out of $totalCount" For example, if num=5 and totalCount=8, I want it to show as 5 out of 8. This is the code I have so far: ... <tr> <td th:text=&quo ...

javahtmlspringthymeleaf

achieving initial value to show upon page load

I'm trying to set a default value that is visible when the page loads. My goal is to have the first button always displayed by default in the "display-donation" div whenever someone visits the form. Currently, when the page loads, 10 is highlighted ...

javascriptjqueryhtml

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

javascriptjqueryhtmlcssangularjs

Getting elements in order with bootstrap

Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...

htmlcssangularjstwitter-bootstrap

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

The function send_filer either returns None or finishes execution without encountering a return statement

I am currently developing an application where users can download a plot.png and a file.csv, but the send_files function isn't working as expected. Below is my Python code: app = Flask(__name__) app.USE_X_SENDFILE = True @app.route('/', met ...

pythonhtmlflaskserversendfile