Bootstrap's Elegant Adjustable Rows

My task is to showcase 8 images using Bootstrap's grid system. Here is the code I have:

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

On larger screens, it appears as follows ("X" represents an image):

XXXX

XXXX

and on smaller screens, like this:

X

X

X

X

X

X

X

X

I aim to achieve:

Displaying on larger screens:

XXXX

XXXX

and displaying on smaller screens:

XX

XX

XX

XX

Is there anyone who knows how to accomplish this?

csstwitter-bootstrapgrid-system

Answer №1

To ensure your images span 6 columns in the image containers at a specified size, simply add the xs declarations as shown below:

<div class="row">
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

<div class="row">
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

Answer №2

In Bootstrap, we utilize designations like sm (small devices) to indicate which media inquiries will activate the column classes for a specific resolution.

xs represents extra small (primarily smartphones/mobiles) sm represents small devices (primarily tablets) md represents medium devices (some older non-HD desktops and laptops) lg represents large devices (HD screens, retina devices, etc)

When you use a class like col-sm-3, you are specifying that on small devices and beyond, the element will occupy 3 columns. You can assign multiple classes to define columns for each resolution:

col-xs-12 col-sm-6 col-md-4 col-lg-2

This translates to:

On xs resolutions or below, the element will fill up 12 columns.

On sm resolutions or above, the element will take up 6 columns.

On md resolutions or above, the element will occupy 4 columns.

For lg resolutions or above, the element will take up 2 columns.

Make sure to set a minimum height value for the column to prevent incorrect wrapping if the image heights vary.

For more in-depth information on the grid/column system, visit this link.

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

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

javascripthtmlcssiframe

The click event does not seem to be functioning properly within a contenteditable div

Incorporating a delete button within the div would allow users to delete it upon clicking. However, there are currently two issues: (1) The alignment of the delete button with the text in the div is not accurate. (2) The click event for the button is not ...

javascriptjqueryhtmlcss

I am unable to find the error message field in Bootstrap with the has-error class

Recently, I've been diving into learning yii and decided to work on a simple form with Bootstrap. Since I am using yii 1.1.x version and not version 2, I had to manually install Bootstrap and code accordingly. But now, I'm facing an issue where t ...

phpjquerytwitter-bootstrapyii

The div using the JS font does not show up within the pop-up content box

Recently, I developed a jQuery loader for my content div. However, it seems that the loader is causing my div class="typeface" to not display properly anymore. As a result, I am unable to use different fonts within this section of my webpage. The rest of t ...

jqueryhtmlcssloader

Utilize the nth-child() selector to style list items within a specific tag

How can I style li tags using nth-child when these li tags are nested within a tag like this: <ul> <a href=""><li>this is a test</li></a> <a href=""><li>this is a test</li></a&g ...

htmlcss

Modify the color of the text for the initial letter appearing in the sentence

I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...

htmlcssangularjs

What is the best way to remove the space between the footer and the bottom of the page

Is there a way to close this distance? I am referring to the gap between the element with text "Jakaś sobie stopka" and the end of the page. Visit this link for more details ...

htmlcss

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs

Is there a way to create more space between the cards in my project?

Could someone help me with separating the cards in my HTML project? I'm new to coding and struggling with this. The cards are too close together for my liking, is there a way to adjust the spacing? Below is the code I currently have: * { box-sizin ...

htmlcss

Using a Bootstrap modal to load a remote ASP.NET web forms URL

I'm currently developing a website using ASP.NET Webforms and Bootstrap. One of the features I have implemented is a webform with a masterpage, which includes a link to open a Bootstrap modal containing content from another page (Test.aspx). <a h ...

asp.nettwitter-bootstrap

Tips for aligning the text of a button and placeholder vertically

I am facing an issue with centering placeholder/input text and button text vertically on my website. I used Bootstrap to create the site and utilized its input and button classes, but I couldn't figure out how to achieve vertical alignment. I tried ad ...

htmlcssbutton

What is the process for linking my CSS file in Yii2 framework?

Currently, I am in the process of linking my CSS file to my project. To achieve this, here is what I have done: Within the /web/css/ directory, I created a file named my-custom.css. Following that, in the /views/my_folder/_form.php file, I inserted the fo ...

phpcssyii2assets

Bootstrap 4 row mysteriously shatters apart

I have searched for solutions to this issue but none of them on this forum have been helpful. Hopefully, someone here can offer some assistance. I am facing a problem with displaying 4 columns of data in one row: Here is the code snippet causing the layou ...

htmlcssbootstrap-4row

Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد? .wrapper { text-align: center; vertical-align: center; } span { font-size: 4rem; display: inline-block; padding: 2rem; margin: 0.2rem; ba ...

csstwitter-bootstrapbootstrap-5

What is preventing the button function from being inherited by all of my newly added notes?

After the DOM is loaded, the JavaScript code below is executed: const add_note = () => { // Creates a new note and its properties const new_note = document.createElement("div"); const new_input = document.createElement("input"); ...

javascripthtmlcss

Placing HTML text on top of a three.js renderer

I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main f ...

htmlcssthree.js

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

jquerycssdynamic

Utilizing Jquery to Integrate Hashtags

I'm looking to implement a feature where any text I write starting with a # symbol automatically changes color to blue, and then returns to black once I hit the space key to end the text. I attempted to achieve this using the following logic within a ...

javascriptjquerycss

HTML5 CSS styling: Using <ul> and <li> tags versus <p> tag for creating a column of links

There are 4 columns of links in the footer, each taking up 25% of the width. All columns share the same CSS style since they belong to the same class. The first column appears as follows: Title of Column 1 link11 link12 link13 To achieve this layout, ...

csshtmlhtml-listssemantics

Retrieve numerical data from the element and enclose it within a span tag

My goal was to indent a number, but the HTML generated from my CMS is making it difficult to target the number and apply a specific style. <div class="content"> <b>01. Header</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

jquerycsstexttextnode