Long block of text and accompanying image aligned side by side, with the image scaled down for

I am currently utilizing Bootstrap 4 and encountering two specific challenges that I need help solving.

  1. I need to resize the image while maintaining its proportions.
  2. Whenever I place a lengthy text (40 characters) to the right of the picture, it ends up shifting below the image.
<div class="container" style="margin-top:110px;"  >
    <div class="d-flex flex-wrap">
        <div style="float:left">
            <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
        </div>
        <div style="float:left">
            <h1 style="margin-left:300px" class="">@Model.Name</h1>
            <h5 style="margin-left:40px" class="">@Model.About</h5>
        </div>
    </div>
</div>
c#htmlcssbootstrap-4

Answer №1

<div class="container" style="margin-top:110px;"  >
<div class="d-flex flex-wrap">
    <div style="float:left">
        <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
    </div>
    <div style="float:right">
        <h1 style="margin-left:300px" class="">@Model.Name</h1>
        <h5 style="margin-left:40px" class="">@Model.About</h5>
    </div>
</div>

Consider trying the following approach:

One potential solution could involve utilizing the flex-wrap property and setting it to nowrap. Check out more information about the flex-wrap property here: 

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

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

Strange behavior exhibited by the HTML DataList component within an Angular application

I have created a simple component that displays a list of data and allows users to add new entries. <h6 *ngIf="withHeader"><label for="select"> {{title}} </label></h6> <label *ngIf="!withHeader" [ngClass]="{'required&apos ...

javascripthtmlangulardomhtml-datalist

Obtain the image format from an HTML page using the Jsoup library on Android

<div class="_jjzlb" style="padding-bottom: 55.2778%;"><img alt="AT Dam party.. #nashik #big #dam" class="_icyx7" id="pImage_11" src="https://instagram.fbom1-2.fna.fbcdn.net/t51.2885-15/e35/17438694_254543168340407_6435023364997251072_n.jpg" style ...

phpandroidhtmljsoup

How can I trigger a function or automate code execution in Angular?

I have some code within a function that is crucial for initializing other variables. The issue I am facing is that this function does not execute unless it is called through another tag in the HTML. Is there a method to automatically initialize this func ...

htmlangular

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

htmlangulartypescriptionic-framework

Get hefty files through a WCF service

I am currently working on an application that needs to handle large files, which is why I am utilizing a stream parameter. Here is the service contract: [ServiceContract] public interface IFile { [OperationContract] [WebInvoke(Method = "POST", Ur ...

c#.netwcfrestdotnet-httpclient

Displaying measurements in ASP.Net MVC using DataFormatString to include unit of measurement

When using ASP.Net MVC, if you decorate a cost property in the model like this: [DisplayFormat(DataFormatString = "{0:c}")] public decimal Cost { get; set; } Then when displaying it on the view using: @Html.DisplayFor(model => model.Cost ) You will ...

c#asp.netasp.net-mvc

Ways to change the CSS styles of components within App

When my app is in full screen mode, I need to increase the font size for certain components. Within my App.jsx file, I have a variable that adds the "fullscreen" class to the root DIV of the app when triggered. Instead of using a blanket approach like * ...

cssreactjs

Using jQuery to create dynamic CSS effects directly on the drop-down menu button

Seeking your kind assistance once again... I am attempting to design a navigation bar that displays the dropdown section upon hovering over the buttons AND shows a bottom border on the button that was last hovered over My code functions properly when I ...

htmljquerycss

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

javascriptjqueryhtmlcss

Having Trouble Positioning Button at Bottom of Browser with Absolute Positioning in HTML and CSS

I am encountering an issue with positioning an element (<button id="foo">FAQ</button>). The CSS code I have for the button is: #foo { position: absolute; bottom: 0px;/* I have also tried using different units */ left: 0px;/* same t ...

htmlcsscss-position

How can I ensure that the AppBar background color matches the color of the navigation bar?

Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...

javascriptcssreactjsmaterial-ui

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

CodeIgniter: Bootstrap disables become enabled once validation is completed

My modifuser views have a disabled input field set to hold the id value. <?php echo form_open('user/updateuser'); ?> <legend>Update User</legend> <div class="form-group"> <label for="id">ID</label> ...

htmltwitter-bootstrapcodeigniter

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

Struggling with the grid layout in percentage and feeling perplexed

As I delve into the world of grid systems, I find myself grappling to comprehend it fully. The complexities can sometimes leave me feeling inadequate in my understanding. From what I gather, a 12-column grid system without any margins means that the 12th ...

htmlcsslayoutgrid

What are some alternatives to MVC Controller Actions that do not return strings?

I have been diligently following the online tutorials to develop my MVC project using Knockout and Entity Framework. I have also implemented a repository pattern. However, as I navigate through these tutorials, it appears that the controller is returning ...

c#ajaxasp.net-mvc-4knockout.js

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

cssreactjsmaterial-uijssinline-styles

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

The <map> <area> element functions properly only in webkit browsers

Here is some HTML code: <div id="wrap"> <div id="main-content"> <div class="container"> <h1 class="logo">Mysite</h1> <img id="links" src="images/links.png" usemap="map" width="946" heigh ...

html

Exploring the World of jQuery Caching and Navigating Through Objects

I'm interested in learning more about jQuery caching and how it can enhance performance. Can you explain how to properly utilize this technique? From what I understand, when using a jQuery selector, you're essentially searching the DOM to create ...

javascriptjqueryhtmldom