Adaptable picture within a bootstrap container

I need help figuring out how to insert an image into a Bootstrap panel (see attached image):

https://i.sstatic.net/BHQI9.jpg

Here is the HTML Code I am using:

<div class="panel panel-default col-md-10 col-md-offset-1">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <label> {{DisplayNickname}}</label>
            </div>
            <img src="{{DisplayPhoto}}" class="pull-right img-responsive" alt="user photo"> 
        </div>
        <font size="4" id=rating_d >Rating: </font>
        <font size="4" id=rating_d> {{DisplayRating | number : 2}}                        </font>
        <br><br>
        <font size="4">Description:</font>
        <font size="4" id=details>{{DisplayDescription}}</font>

    </div> 
</div>

This is the CSS code I have right now:

{
    width: 150px;
    height: 150px;
}

Although it works with position:absolute, it's not responsive. Can anyone suggest the correct approach to achieve this?

htmlcsstwitter-bootstrap

Answer №1

perhaps giving this a shot

<img src="{{ProfileImage}}" class="float-right img-responsive" alt="profile picture" width="150">

if the above doesn't cut it, consider trying out the following

 <div style="width:150px;"><img src="{{ProfileImage}}" class="float-right img-responsive" alt="profile picture" ></div>

Answer №2

Have you considered placing the image in a grid column as well?

<div class="panel panel-default col-md-10 col-md-offset-1">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-10">
                <label> {{DisplayNickname}}</label>
            </div>
          <div class="col-md-2">
            <img src="//placehold.it/200" class="pull-right img-responsive" alt="user photo"> 
          </div>
        </div>
        <font size="4" id=rating_d >Rating: </font>
        <font size="4" id=rating_d> {{DisplayRating | number : 2}}</font>
        <br><br>
        <font size="4">Description:</font>
        <font size="4" id=details>{{DisplayDescription}}</font>
    </div> 
</div>

Just a heads up, using the HTML font tag is no longer recommended (Just FYI)

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

I am experiencing an issue with setting the border to none using .navbar-toggler

I'm currently utilizing bootstrap 5, and I've encountered an issue with setting the border and outline to none in my CSS file. Specifically, when I apply these properties to the nav-toggler class, it seems to have no effect. .menu-bar .navbar- ...

htmljquerycssbootstrap-5

What is the method for altering the look of a button using JavaScript?

As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...

javascriptjqueryhtmlcss

Menu: animated opening/closingIs this convenient, or

How can I add animation to opening and closing menu items in my project? I am not sure if it can be done in Angular or CSS. I have provided a reproduction of the project for reference => Stackblitz. HTML file <div class="wrapper"> & ...

cssangular

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

GitHub Repo: https://github.com/shadowwolf123987/Gun-Identification-App I'm currently facing an issue in passing the values of two C# variables from the code block defined in my view to the corresponding html tags within the same view. Unfortunately, ...

c#htmlasp.net-core-mvc

Callback for 'layout' event not triggered by Isotope filter

Incorporating isotope filters with bootstrap tabs allows for seamless switching between two different isotope filters within individual tab content divs. Due to the hide/show functionality of tabs, it is necessary to execute the isotope layout command eac ...

jquerytwitter-bootstrap

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

Wrapping header text in Vuetify's v-data-table

Struggling with wrapping the header text on a v-data-table component. I've tried applying styles, but only tbody elements are affected. The header (thead element) remains unchanged. Any suggestions on how to get custom styling for the header? For ins ...

cssvue.jsvuetify.js

JavaScript prohibiting input prior to execution

Having trouble with executing this javascript before the user input, can anyone assist me in resolving this issue. I just want to create a simple html page with a textbox and a button. When the button is clicked, it should open a new window with a modifie ...

javascripthtmlurl

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

I have a challenge with creating toggle buttons that require specific functions: 1) Display content on the first click (this is working) 2) Conceal content when another button is clicked (this is also working) 3) Hide content on the second click (this i ...

javascriptjqueryhtmlcss

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

htmlcsshtml-emailinline-styles

Placing emphasis on an object that appears following a period of waiting

I'm currently working on enhancing the accessibility of a slider that will be featured on my website. The goal is to create an effect where, after clicking (or pressing enter) on the first slide, the focus shifts to the second slide element, allowing ...

javascriptjqueryhtmlcssaccessibility

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

javascripthtmlcss

Expanding containers with flexbox to allow for flexibility in size

I need help with a page that contains 3 div elements, where 2 of them need to be resizable. These elements should be able to be moved left or right, and maximized or minimized. You can view the example on Stackblitz. The issue I'm facing is that som ...

javascripthtmlangularflexboxcss-grid

How can I use Jquery to animate an element to the right edge of the window?

Exploring the realm of jQuery animations, I am currently experimenting with animating a div to the right side of the window while changing its color using jQuery UI. This is just a fun project without any specific purpose in mind. Below is the code snippet ...

javascriptjqueryhtmlcss

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

htmlcss

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Is there a method for me to retrieve the current value of top from the animation function provided here?

$(".container").animate({ top: '300px', height: '60px', width: '250px',},5000).fadeOut("fast").hide("fast"); ...

jquerycssanimation

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

htmlcssmargin

When hovering over the background, it will enlarge but the text in front will remain the same size

As the user hovers over the image, the image enlarges. However, there is also some information that needs to be displayed in front of the image. This is my current implementation: .home-about-link { overflow: hidden; width: 100%; } .home-about { ...

javascriptjqueryhtmlcsscss-transforms

How can I trigger a function once ng-show has finished executing?

I have an HTML table and buttons with the attribute ng-show=some_property. What I am trying to achieve is: I want Button1 to reveal a table containing field1, and I would like to change the focus directly from Button1 to field1. However, I am encounterin ...

javascripthtmlangularjsng-show