How to style images in a row using CSS

Currently utilizing bootstrap to create a website and facing the challenge of aligning images horizontally while hiding overflow.

Here is the div section:

<div class="timeline-gallery col-md-12" style="display: inline-block;">
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>

Additionally, provided below is the CSS for styling the images:

.timeline-gallery img {
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 5px;
    overflow: hidden;
}

Despite occupying the desired space, the images are currently arranged as shown in the link below: https://i.sstatic.net/lFE1A.png

htmlcsstwitter-bootstrap

Answer №1

It's quite challenging to grasp your intentions...

<div class="timeline-gallery col-md-12">
  <div class='col-md-4'>
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
  </div>
  <div class='col-md-4'>
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
  </div>
 <div class='col-md-4'>
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
  </div>
</div>

Eliminate style='display:inline-block;' from bootstrap column col-md-12. Then include col-md-4 as the image container, and incorporate CSS for the image:

.timeline-gallery img {
   max-width:100%;
   height:auto;
   margin:0 auto;
}

Nevertheless, I am uncertain about your specific requirements...

Answer №2

Here is the solution you've been searching for: https://jsfiddle.net/forj72t6/1/

.timeline-gallery img {
    display:block;
    position: relative;
    margin-right: 5px;
    overflow: hidden;
    margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="coantiner-fluid">
  <div class="row">
    <div class="timeline-gallery col-md-12"> 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
    </div>
  </div>
</div>

I believe this is exactly what you have been looking for.

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

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

jqueryhtmlajax

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" ...

htmlangular

Adjusting the background color of the list item

I'm looking for a way to change the background color of the li tag when the user focuses on the input, similar to what can be seen at the bottom of this page here. After researching similar questions, it appears that achieving this effect in pure CSS ...

javascriptjqueryhtmlcssfocus

What is the best way to position elements in a horizontal line?

I am trying to align three elements (DIVs) horizontally using Bootstrap's guidelines, but it doesn't seem to be working. This is the desired layout: https://i.sstatic.net/7lPKU.png However, this is what it currently looks like, aligned to the ...

htmlcssbootstrap-4

Set a maximum height for the <td> element within a table, regardless of the length of the text in neighboring cells

Here is the situation I'm dealing with: In the thread, the postbit (blue box with avatar inside) looks fine for most posts (the first three). However, the fourth postbit is vertically elongated due to longer post content. I have been trying differe ...

htmlhtml-tablerowmybb

Can a simple text and javascript be used to create a register/login "database"?

For a school project, I am working on creating a cross-browser login script without using PHP or MySQL. I want the registration process to store usernames and passwords in a plain text file, and the login process to check that file for matches. I acknowled ...

javascripthtmlauthentication

The convergence of lighttpd with AngularJS's html5 mode offers a powerful

My angularJS website is hosted on a lighttpd server, but the html5 mode encounters a 404 error when I refresh or use a direct link. On my local Apache server, everything works fine and there are no issues with the rewrite expression in the .htaccess file. ...

angularjshtmlurl-rewritinglighttpdmode

Trimming whitespace from strings within HTML tag attributes can be achieved using various methods

I have been reviewing the .cshtml pages of a website with the aim of adding ID attributes to various divisions and elements for testing purposes. These pages utilize AngularJS, and many of the elements I need to add ID attributes to are part of a list tha ...

javascripthtmlangularjsstringwhitespace

What might be causing the status problem to not display correctly?

My toggle feature to switch between no issue and issue is not displaying the status correctly. Despite trying to troubleshoot, I can't figure out why the issue section is not showing up. <!DOCTYPE html> <html> <script src="https://aj ...

javascripthtml

Adjust the size of the Error Validation message container

https://i.sstatic.net/e6Lor.png Once validations are added, the error message is displayed within the width of that div. How can I adjust the width to make the error message fit on a single line? Alternatively, if there are other methods for front-end val ...

htmlcssbootstrap-5

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

htmlcsshtml-tablecss-selectors

What are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

javascriptcssintro.js

Storing a JSON object using the caching capabilities of HTML5

As an intern with minimal technical experience, I apologize if my question appears basic. I have been searching for an answer for days without much success. My current project involves developing a Phone Directory. I am now working on creating a frequentl ...

jsonhtml

Tips for modifying the background color of an individual row within a table using the Document Object Model (DOM)

I am trying to change the color of each row in a table only if the text inside the 4th cell is "DELAYED". I have created a function for this purpose, but the color is not changing as expected... function assignColor() { //retrieve all tr elements from ...

javascripthtmlcssdom

Arrange various Div elements of varying sizes in a predetermined sequence

I need to ensure that a large div maintains the same height as 20 other divs within the same container, when the screen size is between 1024px and 1920px in width. The challenge lies in arranging all these items in a floated layout grid that looks clean a ...

jqueryhtmlcssflexboxcss-grid

Design the header and body of the table in a visually appealing format

$("input:checkbox:not(:checked)").each(function() { var column = "table ." + $(this).attr("name"); $(column).hide(); }); $("input:checkbox").click(function() { var column = "table ." + $(this).attr("name"); $(column).toggle(); }) <script src="h ...

javascriptjqueryhtmlcss

Dividing the Row in Bootstrap4 into two columns

I'm trying to figure out how to split a row into two sections to accommodate two headings in a single row, similar to the following: https://i.sstatic.net/GD99P.png Unfortunately, my current code isn't allowing me to separate the row as shown ab ...

htmltwitter-bootstrapbootstrap-4

Ensuring the footer stays anchored at the bottom using Material-UI Expansion Drawers

Utilizing Material-UI@next in my React application, I have a component that showcases a list of items using Expansion Panels. Additionally, there is a straightforward <Footer /> component structured like this: import React, { Component } from "react ...

cssreactjsmaterial-ui

Using JQuery Mobile to Incorporate Links into List Elements

Creating a mobile webpage tailored for college students involves assigning each student a unique id and an additional field. Both fields can be treated as strings, with the unique id being guaranteed to be unique, while the second field may or may not be u ...

jqueryhtmljquery-mobile

Get a captcha using Selenium in Java

I am currently working on obtaining a CAPTCHA image. My previous question mentioned this in this post. I have managed to successfully fill out the necessary forms and download the CAPTCHA, however, it appears to be random each time. This is my current co ...

javahtmlseleniumxpathimagedownload