Creating a responsive design for Bootstrap divs

I am trying to display 5 images in one row with 5 columns. I have used the following CSS for this layout:

  .col-half-offset {
            margin-left: 4.166666667%
        }

This setup works well on the web, but on mobile devices, the layout does not display correctly even though I have added responsive attributes to my img element. What could be causing this issue?

Here is my CSS:

.col-xs-2 {
        /*background:#00f;
    color:#FFF;*/

    }

    .col-half-offset {
        margin-left: 4.166666667%
    }

And here is my HTML:

<div class="row">
            <div class="col-xs-2 ">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 9001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 9001:2015 Kalite Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 14001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" class="img-responsive" alt="Lights">
                        <div col-xs-12 class="caption">
                            <p>ISO 14001:2015 Çevre Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 27001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 14001:2013 Bilgi Güvenliği Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/OHSAS 18001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive" style="width:100%;height:100%">
                        <div col-xs-12 class="caption">
                            <p>OHSAS 18001:2007 İş Sağlığı Güvenliği Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
htmlcssbootstrap-4responsive-design

Answer №1

How about this:

If you're working with Bootstrap 4, remember to use img-fluid for responsive images instead of img-responsive.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col">
       <div class="thumbnail">
           <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
               <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
               <div col-xs-12 class="caption">
                  <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
               </div>
           </a>
        </div>
    </div>
    <div class="col">
       <div class="thumbnail">
           <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
               <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
               <div col-xs-12 class="caption">
                  <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
               </div>
           </a>
        </div>
</div>
    <div class="col">
       <div class="thumbnail">
           <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
               <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
               <div col-xs-12 class="caption">
                  <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
               </div>
           </a>
        </div>
</div>
    <div class="col">
      <div class="thumbnail">
           <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
               <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
               <div col-xs-12 class="caption">
                  <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
               </div>
           </a>
        </div>
</div>
    <div class="col">
      <div class="thumbnail">
           <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
               <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
               <div col-xs-12 class="caption">
                  <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
               </div>
           </a>
        </div>
</div>
  </div>
</div>

</body>
</html>

https://jsfiddle.net/ilazycoder/9xuym2kj/6/

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 up the default path that appears in the URL

Looking to simplify the URL path on your website? When developing webpages, you may have addresses like: www.example.com/index.html www.example.com/about_us.html www.example.com/en/index.html Is there a way to make these URLs more concise, such as: www ...

javascriptjqueryhtml

What is the process for changing the border color of a material selection?

Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: https://i.sstatic.net/mw9jq.png to this: https://i.sstatic.net/8b7w7.png Any suggestions on how to achieve this? Appreciate an ...

cssangularangular-materialmaterial-design

An easy method for modifying data on a webpage hosted by an ESP8266 device

In my web page, I have a form to input times. The page is saved in flash memory and I want to update the times with previously stored values in EEPROM without loading the page into RAM. I prefer not to use websockets or AJAX for this purpose. I am looking ...

c++formsarduinohtmlesp8266

What is the best way to override @include within a CSS class?

Our team's application utilizes Bootstrap SASS for styling, but we have made certain customizations to the framework. The Bootstrap files are included in our project through a build process, making direct modifications impossible. When it comes to dr ...

csstwitter-bootstrapsass

Discoloration of images on HTML5 Canvas

When working with HTML5 Canvas and using the drawImage function, I've observed slight discoloration in certain browsers such as Google Chrome and Mozilla Firefox. Interestingly, Internet Explorer and Chrome Android do not exhibit this issue. The globa ...

htmlimagecanvas

Utilizing Custom Script Tag Types in Visual Studio for Enhanced HTML Template Functionality and Improved Syntax Highlighting

Currently, I am utilizing Visual Studio 2012 for editing HTML and JavaScript. My approach involves inserting templates using partial views in inline script tags (view code below). The use of AngularJS, a Javascript framework, dictates that the type must be ...

javascripthtmlvisual-studiovisual-studio-2012angularjs

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

htmlcssbootstrap-5

Understanding the fundamentals of event handling in JavaScript

Is there a way to access the object that called the event handler within the event handler function itself? For example: marker.on('dragend', onDragEnd); In this case, marker is the object that triggers the ondragEnd function on the Dragend eve ...

javascripthtmljqueryevent-handlingjquery-events

Ways to identify the visible elements on a webpage using JavaScript

I'm working on a nextjs app , I am looking to dynamically update the active button in the navbar based on which section is currently visible on the page. The child elements of the page are structured like this: <div id="section1" > < ...

javascripthtmlreactjsnext.js

Creating a Venn diagram in an .html file with Flask: A tutorial

I am looking to display a Venn diagram on my HTML page using the return render function in Flask. Despite making several attempts, I have been unsuccessful so far. While matplotlib allows me to plot other types of graphs, I haven't discovered a metho ...

pythonhtmlpython-3.xflaskvenn-diagram

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

javascripthtmlangularjs

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

javascripthtmlarrays

What is the best way to move one container below another in mobile view?

I need container-2 to be fully visible on mobile view, but the boxes in box2 are covering it. The size of the boxes in box2 should not change; I just want container 2 to be pushed down so that it is completely visible. body { margin: 0; width: 100%; ...

htmlcssflexbox

Retrieve the value of a related object based on the user's click

Check out this sample code on JSFiddle <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <div></div> JavaScript: function Product(name, price){ this.name = name; this. ...

javascriptjqueryhtml

What is the optimal location for storing numerous blocks of text (without utilizing a database)?

If I have a control used on 10 different pages with a help icon, each page needs to display its own unique paragraph of help text. The selection of which help text to show is determined by a JavaScript function. In my scenario, having 10 paragraphs will n ...

c#htmlasp.netweb-applicationspage-lifecycle

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

Currently, I am working with jQuery version 2.1.4 and JavaScript to implement a straightforward form validation using Bootstrap. During this process, I have encountered three peculiar issues. While I am confident that my jQuery code is properly functi ...

javascriptjquerycsstwitter-bootstrap

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui