What is the best way to horizontally center a div on an extra small screen using Bootstrap?

I am looking to design a div layout with 4 columns, but I want the content centered when the screen is in xs mode. Below is the code snippet I have used:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-md-3">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
  </div>
</div>

However, in the default view, it displays xs-6 resulting in only 2 columns instead of 4 as expected with md-3 setup. I'm unsure why this discrepancy is occurring.

csstwitter-bootstrap

Answer №1

To update the lower offsets, make use of the col-*-offset-0 classes:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
    <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </div>
     <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0">
      <img src="http://placehold.it/200x200" class="img-responsive" />
    </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 reason for Chrome not recognizing 'bottom: 0;' as a valid value for an absolutely positioned footer?

It seems like I may be facing a unique issue with my webpage layout in Chrome. The entire page is set up with absolutely positioned elements within a container that is relatively positioned. Although this setup is not typical, it was necessary for incorpor ...

htmlcss

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

htmlcssasp.net-mvc-4twitter-bootstrap

Why do certain full screen websites not align with my screen width properly?

When I use my 1920px wide screen and inspect the HTML tag with Chrome DevTools on websites like Firebase or Facebook Messenger, I notice a difference: Despite my screen width being 1920px, these websites appear fullscreen with an HTML tag width of 1440px. ...

htmlcsswidth

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

When it comes to developing beautiful web pages and forms from scratch, I often struggle as the end result tends to be quite unappealing. Luckily, there are numerous CSS code snippets available that offer stunning solutions. Currently, I am delving into py ...

htmlcssdjangostylesheetcode-snippets

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...

javascripthtmlasp.netcssinternet-explorer

CSS for Responsive Web Development: Adjusting the Height of Mobile Sliders

I've been working on adjusting the height of the slider on my website for mobile screens, but I can't seem to get it right. The website in question is www.msstoreway.com. Despite adding the CSS code below, I was able to adjust the slider height ...

css

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Style not being applied to CSS class

When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag ...

htmlcssdjango

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

What is the best way to ensure the website title is displayed properly on a mobile browser?

Concern I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this prob ...

htmlcssnavbarbootstrap-5mobile-browser

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Moving the mouse over a div will alter the heading of another div

Trying to find a solution for a unique problem. I have 5 boxes and need to style one box with a different heading color. As I hover over the other 4 boxes, I want the active box heading to change to a new color. The color should remain even after moving th ...

jquerycssmouseoverjquery-hover

What are the best methods for preventing scss styles from leaking between pages?

I'm currently working on a project that includes the following files: /* styles/1.scss */ body { /* Some other styles not related to background-color */ } /* styles/2.scss */ body { background-color: blue; } // pages/one.js import "../styles/ ...

javascriptcssnext.js

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

React - method for transmitting dynamically generated styles to a div element

As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, h ...

javascripthtmlcssreactjs

Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence. ...

htmlcssfontsbootstrap-4

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

Trigger JQuery function post CSS styling completion

Upon using $(document).ready(function() {...}, it seems that the function is invoked after the DOM has loaded, but potentially before CSS styles have been completely applied. My goal is to obtain the width of a particular element. Strangely, when attempti ...

jquerycss