Show pictures side by side within bootstrap column

Using the new Bootstrap 4 alpha 6, I am attempting to showcase three images side by side.

<div class="row">
 <div class="col-md-4 text">
  <p>including some descriptive text.</p>
 </div>
 <div class="col-md-8 screens">
    <img class="img-fluid first" src="{{asset('/images/project/screen-1.png')}}" alt="First screen">
    <img class="img-fluid main" src="{{asset('/images/project/screen-main.png')}}" alt="Main screen">
    <img class="img-fluid second" src="{{asset('/images/project/screen-2.png')}}" alt="Second screen">  
  </div>
</div>

I've experimented with changing display options for .screens and the images themselves, but have run out of ideas.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When dealing with responsive images, it is important to ensure that each image has its own container for proper sizing. In the provided example, all three images are placed within a single container, which prevents them from adapting individually. To address this issue, you can consider implementing the following code:

.row li {
  width: 33.3%;
  float: left;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
<div class="row">
  <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
    <ul>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
    </ul>
  </div>
</div>

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

Troubleshooting problem with accordion card within a JavaScript array

I am currently facing an issue with my list display that fetches data from a database. The problem lies in the accordion feature not functioning properly when integrated into a JavaScript array, yet it works perfectly when directly inserted into HTML code. ...

javascripthtmlcssarraysjson

What is the easiest way to modify the color of a basic PNG image in a web browser?

While working on a website project, I encountered instructions for mouseover styles in the design that got me thinking: It's straightforward to achieve with javascript or css image swapping... but here's the catch. There will be multiple icon li ...

htmlcsssvgmask

When the section comes into view on the screen, the CSS animation will play only one time

While browsing through , I found some fantastic animations that inspired me. The animations at the header seem to be standard CSS animations with delays. However, as you scroll down and other sections become visible, the animations reappear only once. Can ...

javascripthtmlcssanimationcss-animations

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

Expanding Soccer Field to Maximize Viewing Experience- React/CSS

I'm looking to make a soccer pitch design in CSS that can adjust its size based on the device screen, making it responsive and reusable for both web and native app development (specifically with React). Currently, I'm stuck trying to determine h ...

javascripthtmlcssreactjsresponsive-design

Tips for toggling password visibility by clicking outside a password field

As I work on creating a password field that allows users to toggle the visibility of their password by clicking an eye icon, I am facing a challenge. I want the password to be hidden automatically when the user clicks outside the field, which requires a co ...

javascripthtmljquery

Tips on incorporating a scrollbar into a table using PHP?

I need help figuring out how to add a scroll function to my table that is generated in a PHP file. I prefer not to implement the scroll feature in a separate style.css file, I want it to be directly embedded in the PHP file itself. Below is the code I ha ...

phphtmlcssmysql

Creating HTML elements using JavaScript's Document Object Model

I am trying to create an img tag dynamically using JavaScript with the following code: <img id="drag0" src="http://localhost:34737/Images/MainSlider/A(1).jpg" class="col-4" draggable="true" ondragstart="drag(event)"> and I have a drag method setup ...

javascripthtml

Why is the header image not appearing on mobile devices on the website?

I recently finished creating my own website with a header image that successfully expands to the width of the screen during testing on Google Chrome for mobile responsiveness. However, upon deploying and viewing the site on actual mobile devices, the heade ...

javascripthtmlcss

What are the proper steps to ensure images are displayed correctly on mobile devices?

https://i.sstatic.net/M68Ob.jpg https://i.sstatic.net/fPKXr.jpg Our background image is 1920x1080p and looks great on desktop browsers, but it's not displaying properly on mobile devices in either portrait or landscape mode. Is there a way to resolv ...

htmlcssresponsive-design

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

htmlcssangularangular-material

Utilizing Angular to upload multiple images and send them to an API endpoint

Currently, I am utilizing Angular on the front-end and attempting to upload two images in order to send them as a single string to an OCR API. Below is my code snippet: let reader:FileReader = new FileReader(); let image = new Image(); va ...

htmlangulartypescript

Utilize the current code base to develop a sliding footer feature

I'm interested in adding a slide-out footer to my website, similar to the one on GunsNRoses' site. I want to maintain a clean design with content on the page, so I thought implementing a slide-out footer using jQuery would be a great solution. Af ...

javascriptjqueryhtmlfooterslide

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

javascripthtmldom

What is the most effective approach for delivering arguments to event handlers?

Consider the following block of HTML: <button id="follow-user1" class="btnFollow">Follow User1</button> <button id="follow-user2" class="btnFollow">Follow User2</button> <button id="follow-user3" class="btnFollow">Follow User ...

javascriptjqueryhtmljquery-selectorsjquery-events

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

htmlhtml-tableresponsive

One way to retrieve this attribute with jQuery is by specifying the div element in question

I am facing an issue with a div that is defined within a particular context. Let's consider the div as shown in the code snippet below: <td itemid='desired number'> <div>div 1</div> <div class="action">div 2</ ...

javascriptjqueryhtml

Tips for breaking a lengthy post title within a table data cell

Recently, I encountered a frustrating problem while attempting to display lengthy titles within table td elements. Despite trying various suggested solutions, none of them seemed to work as expected. After experimenting with different techniques, I managed ...

csshtml-table

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss

_my_custom_styles.scss are being overridden by reboot.scss

Hey there, I'm currently facing an issue where my custom CSS is getting overwritten. Even though I have placed my custom CSS beneath the CDN bootstrap reference, it doesn't seem to resolve the problem. For instance, when attempting to change the ...

htmlcssbootstrap-5