Bootstrap's media object is a powerful feature that allows for the

I am currently learning BootStrap and running into some challenges with media objects. My goal is to design a basic container with an image on the left side and text on the right side. However, I am facing an issue where when my content exceeds one line, the entire media-body gets pushed into a new block below the image. Is there a solution to this problem? I would like the picture to always appear on the left and the media-body on the right, regardless of the length of text. Apologies if this has been addressed before, but I would greatly appreciate any guidance provided.

javascripthtmlcssbootstrap-4frontend

Answer №1

Thank you for your question, I have a potential solution for you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c08120a120d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"gt;

</headgt;
<bodygt;
    <div class="container-fluid">
        <div class="media">
            <img src="https://i.picsum.photos/id/2/100/100.jpg?hmac=Y2da7WhwSnMn7y41c8WEc1ZO_AGIhVD3zTzghi4-Hiw" class="mr-3" alt="...">
<div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</pgt;
            </divgt;
        </divgt;
    </divgt;


    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147e656171666d54273a213a25">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></scriptgt;
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010647e667e61">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></scriptgt;
</bodygt;
</htmlgt;

You can view the codepen example by following this link https://codepen.io/azaharmohd/pen/abEYqwa

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 creation script in create-react-app automatically includes an external import in the CSS file

I am facing an issue with my create-react-app. Everything works perfectly fine when I run it using npm run start. However, after building it with npm run build, some CSS appears to be missing from the app. Upon investigation, I discovered that the file bu ...

cssnode.jsnpmcreate-react-app

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas

How can I create a form layout using jquery jTable?

Using the jquery jtable plugin has been great for editing data, but I've encountered an issue with controlling the layout of the generated form. Currently, I can only get a single column of controls with headers, which is not ideal. Has anyone discov ...

javascriptjqueryjquery-jtable

I continuously encounter an issue in Vite version 3.2.4 where an error pops up stating `[vite:esbuild] The service has stopped running: write EPIPE`

When I finished creating a Vite app, I ran the command npm run dev and encountered the following error: [vite:esbuild] The service is no longer running: write EPIPE https://i.stack.imgur.com/MZuyK.png I need help solving this error. Can anyone provide gu ...

javascriptreactjstypescriptnpmvite

Uncovering unseen glitches while coding in Vue.js

After changing the page, I noticed that the errors from the form are still visible. Is there a way to make them disappear when navigating away and only show up if I return to the page? Here are the errors I am encountering: <template> <b-form @ ...

javascriptformsvue.jsvuejs2

Make sure the 'card-title' is positioned directly before a div element

How can I align the 'title' to start right above 'first yeah', with the image positioned accordingly? https://i.sstatic.net/fyI2o.png I've attempted various methods (including using classes) but have been unsuccessful so far Her ...

htmlcssbootstrap-4bootstrap-5hbs

Execute a Node.JS query using an HTML select dropdown

My goal is to customize queries to a mySQL database based on the user's selection from select options on my website. Here is the HTML code: <select id = "year"> <option value = "yr" selected>Choose a Year</option> <option id = " ...

javascriptmysqlajaxnode.js

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

javascriptjquerygithtml

Data cannot be found when jQuery form submission is attempted

I am facing a challenge with my webpage that generates multiple dynamic forms through a database, each intended to submit data to a webhook for an API call. Despite searching various forums extensively, I have not yet found a solution to my problem. It ha ...

jqueryhtml

Acquiring variables from a JQuery Ajax request while invoking a JavaScript file

I'm currently experimenting with using JQuery Ajax to retrieve a javascript file. I need to pass some parameters to it, but I'm not entirely sure how to do so in Javascript (PHP seems easier for this). Here is my current setup: function getDocum ...

javascriptjqueryparametersparameter-passing

Vue: The computed property cannot be set

I'm having trouble with utilizing computed properties and ajax calls in Vue.js. The "filterFactories" variable stores a list of factories. A computed property named "filterFactories" generates this list of factories. Now, I am looking to implement a ...

javascriptvue.jsvuejs2computed-properties

Navigating to a different directory using Node.js and ExpressJS route mapping

I'm struggling with setting up routing using ui.router. This is the structure of my folders: https://i.stack.imgur.com/Fu0A9.png In the app.js file within the javascripts folder, I have the following code: var app = angular.module('testing&ap ...

javascriptangularjsnode.jsexpressnpm

Utilize the "require" keyword to bring in multiple items instead of using the "import" statement

I'm looking to incorporate Apollo Client into my project using the following syntax. import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client'; However, my project setup only supports the use of the "require" keyword ...

javascriptnode.jsnode-modules

Ways to eliminate an item in a JSON structure?

Allow me to elaborate. I received a JSON containing numerous objects: data = [{"id":"784","label":"blah","publisher":"me"},{"id":"785","label":"bleh","publisher":"you"},{"id":"786","label":"blih","publisher":"she"}]; For instance, I am looking to elim ...

javascriptjqueryjsonobject

When the onClick event on one element triggers a change in another element within the

I apologize if the title is not clear. I have a React component with buttons and text, which I have used three times. My goal is for each button to display its respective text when clicked, while hiding the texts associated with the other buttons. While m ...

javascriptreactjs

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

javascriptvue.jswebpack-dev-server

Live PHP statement continuously updates display

Below is the setup for my input field. The question to fill in the input will only be prompted if either $client_chargeBy is equal to "Square Foot" or "Room" <div class="col-md-12 p0 "> <div class="col-md-6 PL0 p0_smresp"> <di ...

phphtmllaravel

Vue app hosted on Firebase displays a blank page when user logs in

After deploying my Vue2 project to Firebase hosting server, visitors are required to log in to access the other pages. The issue is that once a user successfully logs in, they are redirected to the next page but it appears blank. Below is what the firebas ...

javascriptvue.jsvue-componentvue-routerfirebase-hosting

Encountering difficulties with properly storing an array in MongoDB using Node.js and Mongoose

Can you point me in the right direction on how to properly store an array of data in mongodb using node/mongoose? I'm currently facing an issue where all my data is being saved as the first value in the array. Here's a snippet of my code: const ...

javascriptnode.jsmongodbexpressmongoose

Exploring the process of setting up a datasource for Select2 in October CMS using the integrated Ajax Framework

Looking to utilize the extensive AJAX framework provided by October CMS to populate a Select2 box with data. The process of using a remote dataset in Select2 involves the following steps: $(".js-data-example-ajax").select2({ ajax: { url: "https://a ...

javascriptphpajaxjquery-select2octobercms