Mobile device grid system malfunctioning

I am currently attempting to display these 4 images in two rows when viewed on mobile, with two images per row. However, on desktop, I want them centered in one row only.

Unfortunately, I am having trouble centering the bottom two images on mobile without affecting the desktop view.

Below is the code I have been working with:

<div class="col-12 col-sm-12">
  <div class="row">
    <div class="col-1 col-sm-1"></div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about1.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about2.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about3.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about4.jpg">
    </div>                  
  </div>
</div>

Here is a snapshot of what is happening: picture

Appreciate any help or suggestions. Thank you!

htmlcssbootstrap-4

Answer №1

To easily center your content, you can utilize the margin utilities found here.

For a practical example, check out this link: https://www.codeply.com/go/sA5gd0e2Zp


    <div class="col-12 col-sm-12">
        <div class="row">
            <div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 mr-auto mr-sm-0 aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 ml-auto ml-sm-0 aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
            <div class="col-5 col-sm-2 mr-auto mrnone aboutMid aboutMid1">
                <img src="//placehold.it/400" class="img-fluid">
            </div>
        </div>
    </div>

Answer №2

Give this a shot

<div class="col-12 col-sm-12">
    <div class="row">
        <div class="col-5 offset-1 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about1.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about2.jpg">
        </div>
        <div class="col-5 offset-1 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about3.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <img src="assets/about/about4.jpg">
        </div>
    </div>
</div>

It appears that the issue lies in the lack of indentation on the bottom row. To address this, you may need to adjust the styling for larger screens using a media query. For example, consider adding col-lg-5 with offset-lg-1. On mobile devices, however, the current setup should suffice.

Answer №3

Here's a more elegant solution: Instead of using 

<div class="col-1 col-sm-1"></div>
, you can utilize offset-1.

Take a look at this example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-5 col-sm-2 offset-1 offset-sm-2 aboutMid aboutMid1">
           <p>first</p>
            <img src="assets/about/about1.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <p>second</p>
            <img src="assets/about/about2.jpg">
        </div>
        <div class="col-5 col-sm-2 offset-1 offset-sm-0 aboutMid aboutMid1">
            <p>third</p>
            <img src="assets/about/about3.jpg">
        </div>
        <div class="col-5 col-sm-2 aboutMid aboutMid1">
            <p>fourth</p>
            <img src="assets/about/about4.jpg">
        </div>
    </div>
</div>

Answer №4

It appears that this code snippet utilizes bootstrap styling.

The "col-" class without a suffix is likely intended for the smallest screens, such as mobile devices.

There are 12 columns per row in this layout, and it seems you have only inserted 1 + 5 + 5 + 5 columns, which may be causing the display issue. Make sure to fill up the remaining columns to reach a total of 12. (This adds up to 24 columns in total, allowing for two rows of 12 on mobile)

<div class="col-12 col-sm-12">
  <div class="row">
    <div class="col-1 col-sm-1"></div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about1.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about2.jpg">
    </div>
    <div class="col-1 col-sm-1"></div>
    <div class="col-1 col-sm-1"></div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about3.jpg">
    </div>
    <div class="col-5 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about4.jpg">
    </div>
    <div class="col-1 col-sm-1"></div>
  </div>
 </div>

Alternatively, using offsets as suggested by other answers could also resolve the issue. It ultimately depends on your specific design needs.

Answer №5

Sure thing!

<div class="col-12 col-sm-12">
     <div class="row">
       <div class="col-sm-2"></div>
       <div class="col-6 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about1.jpg">
    </div>
    <div class="col-6 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about2.jpg">
    </div>
    <div class="col-6 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about3.jpg">
    </div>
    <div class="col-6 col-sm-2 aboutMid aboutMid1">
      <img src="assets/about/about4.jpg">
    </div>
  </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

What is the process to design and implement this button using HTML and CSS?

I am in need of creating a button similar to the google button shown in the image, but I am struggling to position it correctly on the margin. Can someone please assist me with this? The google button is the specific type of button that I am aiming to rep ...

htmlcss

I'm experiencing issues trying to cast an HTMLSelectElement in TypeScript

Currently, I am working with Angular 5. When attempting to typecast my element to HTMLSelectElement in the .ts file, it is causing an error to occur. I have looked over the documentation and can confirm that the 'value' option does exist in HTMLS ...

htmltypescriptangular5

Customizing a toggle checkbox in Bootstrap 5: A guide to personalization

I am attempting to modify a toggle switch in Bootstrap 5.2. <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge> <meta name="viewport" content="wid ...

htmlcsstwitter-bootstrapcheckboxbootstrap-5

Each click on Named Window in window.open results in the opening of a new window

Whenever I use window.open() to launch a new window, clicking the button creates a new browser instance each time, even if the function specifies a named window. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l ...

javascripthtml

CSS dilemma: A snag with pointer-events and the a:focus attribute

Does anyone have experience troubleshooting issues with navbars? I could really use some help. I am facing an issue with my navigation bar where I have different links that reveal an unordered list of sublinks upon clicking. The CSS for my <ul> is ...

htmlcss

Verify the tags associated with an element that has multiple tags

For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...

javahtmleclipseseleniumtags

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

The text decoration feature in CSS is not functioning correctly

I have been working on implementing text differencing in JavaScript using a specific code, and so far, it has been working well. Recently, I attempted to enhance the display by adding a text-decoration that would show a line over incorrect parts of the se ...

javascriptcss

Validation of select inputs in Bootstrap 4 using bootstrap-validate

I have been using the bootstrap-validate plugin for Bootstrap 4, which can be found here. Currently, I am attempting to validate a select input in the following way: <div class="form-group"> <label for="numberOfBedrooms">Number of Bedroom ...

bootstrap-4bootstrap-validate

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

jqueryhtmlcss

Accessing the view of a child component in Angular from its parent component

In my parent component's template, I have inserted a table with each row being a child component that loops through *ngFor. Parent template : <table style="width:100%"> <tr> <th>Id</th> <th>First Nam ...

htmlcssangular

What is the best way to include values with spaces in an option tag?

I am looking to store a string with multiple words in the value attribute of an option tag. echo "<option value=".$row['code']." ></option>" ; Although I attempted this approach, only a single word is displayed. ...

phphtml

Tips on accessing attribute values within a loop using jQuery

I've got this snippet of code from an HTML form. <?php foreach ($charges as $c): ?> <br><input type="checkbox" id="charge<?php echo $c->id; ?>" cash="<?php echo $c->amount; ?>"> <?php echo $c->description ...

javascriptjqueryhtml

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

javascriptjqueryhtmlcss

How to target an ID containing a dot using jQuery

My nodes sometimes have a dot in their ID attribute, as shown in this example: <div id="site_someSite.com"></div> When I try to select this element using jQuery with the following code: variable = $('#site_'+user); (where user is &a ...

jqueryhtmlcss

What is the best way to align this list horizontally with evenly distributed widths?

I am struggling to figure out how to turn this into a horizontal list where all the elements have equal width. If there is any missing information, please let me know by commenting or messaging. All the CSS that is not within the "grid" <li> is for ...

htmlcss

Tips on preventing CSS issues when the background of the second line overlaps the text of the first line

I'm currently working on creating a website at I've noticed that the background of the second line's title element is overlapping the first line. Any suggestions on how to prevent this from happening? Thank you for your help! ...

css

How to efficiently center and adjust the size of a div-wrapper containing multiple responsive divs

I could use some assistance with this particular issue. What's been successful so far: I have a large div within my body (and also inside main, for css-related reasons), housing eight smaller divs divided into four columns. I've applied float:l ...

htmlcssresponsive-design

Can Bootstrap support breaking the inline code block?

I am currently developing Blaze, an application that utilizes the SE API to retrieve recent content. It is effective in identifying NAAs, but a particular issue arises when someone places extensive code or even an entire sentence within an inline code bloc ...

htmlcsstwitter-bootstrap

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I have a requirement to execute two functions in my click event, one for my component and the other for a custom JavaScript function. Here is the code snippet: Angular click event: <button type="button" class="btn btn-primary" (click)="Plans(); " [att ...

javascriptangularhtmlangular6angular7