What is the method for creating five columns in a single row using Bootstrap?

How can I make my columns responsive for all screen sizes? Currently, I have set the width to 20% for each column, but I would like it to adjust accordingly. Here is a link to the fiddle. Any help on making the row responsive with five columns would be greatly appreciated.

HTML

<div class="container"><div class="row">
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>
            <i class="icon-close sprite"></i>
        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
</div>
</div>

CSS

.add_more_images .grid-five{
  width:20%;
}

Answer №1

To ensure that the images adapt to different screen sizes, you should assign them a width of width: 100%

.grid-five {
  width: 20%;
}
.grid-five img {
  width: 100%;
}

Check out the updated fiddle here

.grid-five {
  width: 20%;
}

.grid-five img {
  width: 100%;
}


/* Additional styling for this demo */

.grid-five {
  border: 2px dotted red;
  box-sizing: border-box;
}

.grid-five + .grid-five {
  border-left: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>
        <i class="icon-close sprite"></i>
      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
  </div>
</div>

Answer №2

Take a peek at this code snippet: https://jsfiddle.net/ash06229/fng2zpbn/

.add_more_images .grid-five{
  min-width:320px;
  width: 20%;
}

.add_more_images .grid-five img {
  width: 100%;
}

.add_more_images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

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

In search of a comprehensive AJAX-enabled content management system

Is there a Content Management System (CMS) available that can create a fully ajax-driven website, allowing for a persistent Flash component without the need to reload it with each page navigation? ...

Guide on creating a logarithmic-based bar rating system

I am working on creating a bar rating system for my website, but the current design doesn't look great. I want the height of the bars to increase like an exponential curve gradually, starting off not too steep and gradually increasing afterward. Here ...

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

What are the most effective techniques for setting up headers in a table for optimal organization?

I have a dataset in a table format and I am looking to adjust the spacing to avoid overcrowding. At the same time, I want the title row of the table to not follow the same spacing rules as the rest of the cells. Is there a way to achieve this without crea ...

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Is there a way to center the form inside a card with 3 columns on each side, so that the form appears in the middle occupying about 6 columns without relying on Bootstrap, Materialize or any similar framework? Thanks! <div class="card"> & ...

Error: Unable to execute candidate.toLowerCase as a function

Encountering the following errors: `Uncaught TypeError: candidate.toLowerCase is not a function. I am utilizing the AutoComplete API within Material UI, however, when I search in the input field, it leads me to a blank page. https://i.sstatic.net/Yv3ZU.pn ...

What is the best way to position the logo on the left side and the navigation on the right

How can I position my logo to the left of the navigation bar? This is my current HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> & ...

Is there a way to automatically remove a video using JavaScript once it has completed playing?

This is my HTML section: <section id ="information"> <video id ="videoName" width="800" height="400" controls onplay="myAnimationPicture()""> <source src="video/videoName.mp4" ; type="video/mp4"> Your browser does not support the ...

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

Group input with segmented buttons (Bootstrap 4 alpha version)

In Bootstrap 4's input-group dropdown arrow is displayed under action button: https://i.sstatic.net/eGzcb.png <div class="container"> <div class="input-group"> <input type="text" class="form ...

Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including ::selection{color: white; background: #2f3f58;}, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a ...

How can one execute a function within an HTML attribute value using Angular?

I am currently attempting to use the weatherToFontAwesomeIcon(weatherDescription: string) function directly within the HTML file for this component. My goal is to showcase a specific FontAwesome icon based on the weather response from the API. import { Cur ...

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

Using jQuery to close a DIV with a delay

At the top of my website, I have set up an alert with a close button. The jQuery function for closing the alert is as follows: /* CLOSE ALERT BAR WITH BUTTON */ $('a.ctp-alert').click(function () { $("div.ctp-alert").slideUp(); }); While this f ...

Having trouble getting the align-items-end property in Bootstrap 4 to function

After dedicating almost two full weeks to this project, I'm still struggling to achieve the desired outcome. I suspect that the issue may lie in the depth of the rows and columns I'm working with, but I'm open to any external perspectives or ...

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Using mediastreamrecorder.js, I am successfully recording video in 5-second blobs within the ondataavailable function. Here is an example of the code: mediaRecorder.ondataavailable = function(blob) { blob=blob; }; While I am a ...

Issues encountered while sending HTML Form data to MySQL with Node JS

I have been experimenting with a basic html form to mysql using nodejs, but unfortunately it is not functioning as expected. The HTML file is named index.html and the Node.js file is called test.js. Below you can find my code: My HTML <!DOCTYPE html&g ...

Electron does not prioritize the @css prefers-color-scheme option

I recently completed an Electron project and decided to incorporate dark mode support into it. However, for some reason, the dark mode feature is not functioning properly. Below you will find the dark.css styling that I have included in every page: @medi ...