Position two images side by side with their captions in a single row within a Bootstrap panel

I am trying to create a bootstrap panel that includes two images and text all on the same row. However, using display:inline-block; and display:inline; did not work as expected in this case.


    <div class="panel panel-default">
      <div class="panel-heading"><b>Owner</b></div>
      <div class="panel-body" id="owners">
          <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"><h4>Firav</h4>
          <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4>
      </div>
    </div>
    <br>

Answer №1

If you want to achieve this look, you can follow these steps:

.panel-body figure{display:inline-block;}
<div class="panel panel-default">
      <div class="panel-heading"><b>Owner</b></div>
      <div class="panel-body" id="owners">
        <figure>
          <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64"><h4>Firav</h4>
        </figure>
        <figure>
          <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4>
        </figure>
      </div>
    </div>

Answer №2

To achieve the desired layout, you can use the following code:

HTML Code:

 <div class="panel panel-default">
      <div class="panel-heading"><b>Owner</b></div>
      <div class="panel-body" id="owners">
      <ul> <li><img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/40/405b7b5da64cc1dbcb68110ca5e65a9c751b79a0_full.jpg" height="64">
          <h4>Firav</h4></li>
          <li><img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/66/66cd4ded6f8bc2761f64c110ff8f8b93e568082e_full.jpg" height="64"><h4>Donnyy</h4></li></ul>
      </div>
    </div>

CSS Code:

#owners ul{list-style:none;margin:0;padding:0;}
#owners li {float:left;margin:0 10px;}
#owners li:first-child{margin-left:0;}
#owners li:last-child{margin-left:0;}

Answer №3

Implementing bootstrap styles:

  <div class="panel panel-default">
    <div class="panel-heading text-center">
      <h3 class="panel-title"><b>Leader</b></h3>
  </div>
  <div class="panel-body" id="leaders">
      <ul class="list-unstyled list-inline">
        <li class="text-center">
          <img src="http://example.com/image1.jpg" height="64">
          <h4>John</h4>
        </li>
        <li class="text-center">
          <img src="http://example.com/image2.jpg" height="64">
          <h4>Jane</h4>
        </li>
      </ul>
  </div>
</div>

jsfiddle

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

Setting the height and width of a table and utilizing rowspans may not produce the desired outcome

I've encountered an issue with my table that I can't seem to resolve. The CSS should dictate the width and height, but something seems off. Am I approaching this incorrectly or is there something missing? Also, why are the borders not aligning p ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

I need assistance in validating and processing an HTML form that takes input from a UI login interface while utilizing the Fiber framework in the Go programming language

Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

Preserve Angular Material Mat Ripple Animation even after it has been clicked

When using mat-list with matRipple for click animations, the default behavior is for the ripple animations to disappear after a while. However, I want to keep the animation even after clicking so that the background color won't change. Is there a way ...

What is Reddit's approach to creating a login/signup modal?

Attempting to create a modal similar to the one on Reddit, I am puzzled about how they achieve the following: Scroll is disabled when the modal is open Scroll is enabled when the window is smaller than the modal I have experimented with various CSS ...

Saving a user's identification in the PHP session storage

I'm currently developing a mobile web application and encountering some challenges with the log-in process. Once a user has registered, the first step they need to take on my website is logging into the portal using a username and password. The cred ...

Position text dynamically within, to the right, or to the left of an element

As a CSS beginner, I am seeking advice on how to properly position the text in a Gantt chart. Currently, all the text is within the bar and wrapping occurs as the bar narrows. I am looking for a solution to have the text aligned either left or right of the ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

Determining the Minimum and Maximum Widths of a Div Container Using CSS

I have created a basic grid structure with several rows and columns. The top row spans the entire width, the second and third rows each contain two columns, and the bottom row also spans the entire width. Currently, all elements are fixed at specific size ...

Looking to dynamically adjust row color based on status using ANGULAR 4

In my table, I have 6 columns: name, email, phone, company, status_1, and status_2. Both status_1 and status_2 can have two options: "1" or "0." My Requirement: I want to change the color of the row based on the following logic: if(status_1 is "1" ...

Steps for dynamically applying a CSS class to items within an ASP.NET CheckBoxlist in an HTML table

Is there a way to dynamically apply CSS classes to ASP.NET CheckBoxlist HTML table elements programmatically? For instance, I would like the "table", "tr", and "td" tags in the output below (as seen in the browser View Source) to include CSS styles. < ...

The HTML returned by Ajax does not appear to be aware of the JavaScript functions that have been applied to it

Currently, I am working on making AJAX requests that return elements in a table. Everything seems to be functioning well and displaying properly. However, I have noticed that any elements appended to the table which contain HTML like this: <div id="myI ...

Loop through an array of values in AngularJS

Here is an example of an array: [ {type:'x', value:'123'}, {type:'y', value:'456'}, {type:'z', value:'789'}, {type:'w', value:'012'}, {type:'q&apo ...

Different "criteria" for CSS wildcard selectors using Selenium

There are several CSS webelements on my page with ids in the format: cell_[number]-button_[number] I am attempting to target ALL of these elements by using Selenium to locate all elements that begin with cell and include button: var elements = Util.driver ...

Unclear when notifying div content

After creating a PHP page, I encountered an issue while trying to select the inner text of a div and alert it with jQuery. Instead of getting the expected result, it keeps alerting "undefined." What could possibly be causing this? Here is the code snippet ...