"Using Bootstrap to specifically align a grid of images in the center on any screen size

I'm currently utilizing bootstrap to center a group of social icons beneath an h1 text on all screen sizes. While I've managed to achieve this, there are two specific sizes where the alignment seems to be off.

Here's a snapshot showing a slight left shift

And here is another image displaying a minor rightward shift

Below is the snippet of my code:

<div id="container">

        <div class="social-and-coming">
    <div class="coming-soon text-center ">
        <h1 class="coming ">Coming Soon</h1>
    </div>
    <div class="row">
    <ul class="col-md-offset-3 col-md-11 col-sm-offset-3 col-sm-11 col-xs-offset-1 col-xs-11">

        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a></li> 
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a></li>
    </ul>
    </div>
    </div>
</div>

Additionally, here is the corresponding css:

#container{
      // min-height:100%;
   position:relative;
}

.site-title a{
    font-family: Heiti TC;
    color: #E8970C;
}

.text-center{
    color: #E8970C;
}

.coming-soon h1{
    font-family: Heiti TC;
    font-size: 75px;
}

.row{
    // width:700px;
margin: 0px auto;
}

.col-xs-1{
    margin-left: 15px;
}



li{
    margin-right: 20px;
    margin-top: 20px;
}

img{
    width:40px;
}

Your assistance with this matter would be greatly valued!

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired result, simply eliminate the list and utilize text-center just like you did for the title:

<div id="container">
    <div class="social-and-coming">
        <div class="coming-soon text-center">
            <h1 class="coming">Coming Soon</h1>
        </div>
        <div class="text-center">
            <a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a>
        </div>
    </div>
</div>

Answer №2

Your layout currently uses bootstrap offsets which prevent it from being centered. To solve this issue, I recommend simplifying the structure by removing the UL classes and adding an id with specific CSS properties:

#socialLinks {
  list-style:none;
  text-align: center;
}

#socialLinks li {
    margin: 0;
    display: inline-block;
    float: none;
}

View the demo on jsFiddle

#container {
  // min-height:100%;
  position: relative;
}

.site-title a {
  font-family: Heiti TC;
  color: #E8970C;
}

.text-center {
  color: #E8970C;
}

.coming-soon h1 {
  font-family: Heiti TC;
  font-size: 75px;
}

.row {
  // width:700px;
  margin: 0px auto;
}

.col-xs-1 {
  margin-left: 15px;
}

li {
  margin-right: 20px;
  margin-top: 20px;
}

img {
  width: 40px;
}

#socialLinks {
  list-style:none;
  text-align: center;
}

#socialLinks li {
    margin: 0;
    display: inline-block;
    float: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">

  <div class="social-and-coming">
    <div class="coming-soon text-center ">
      <h1 class="coming ">Coming Soon</h1>
    </div>
    <div class="row">
      <ul id="socialLinks">

        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer №3

Here's a simple solution:

.yourclass {
    width: DEFINE_WIDTH;
    margin: 0 auto;
}

This will ensure center alignment regardless of the screen size. To add spacing around the element on smaller devices, include padding in the class.

Answer №4

Is it possible to avoid using Bootstraps Div class helpers?

class: Text-align (text) Class: middle-block (images)

While they seem to be effective for me, I don't frequently use offsets so I'm not entirely sure of their effectiveness.

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 best way to horizontally align and center the navigation menu?

I've been struggling to center and align the navigation links inside this div horizontally. I attempted a few methods, but none seem to work. I managed to fix the previous issue with #centermenu, but unfortunately it still isn't functioning as e ...

css

Please view the file by accessing exclusively mydomain_name/filename.html

I am looking for a way to block access to specific URLs on my domain and redirect them to another page. The user should still see the original URL in the address bar, and all styles and scripts need to function properly. Can someone help me achieve this? ...

phphtml.htaccess

Adding a div element with a background behind a text element using Jquery

Is there a way to position an absolute div behind text or images while staying in front of background images? I have content with background images behind the text, so setting the z-index of the absolute div to -1 won't work. Any suggestions on how to ...

javascriptjqueryhtmlcss

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

javascriptjquerycsstwitter-bootstrapmenu

The Angular ng-bind directive does not reflect changes in value updates

I am trying to dynamically update the content of a span element to reflect the current position of the element. The issue I am facing is that Angular does not update the value of the ng-bind attribute when I change the element's position. Here is my ...

javascriptjqueryhtmlangularjs

Is there any method to determine whether a floated element has been pushed down?

Imagine a dynamic menu with floating elements, each set at a width of 150px. As the menu's width decreases, the elements progressively move to the next row. You are contemplating how to detect when an element has been moved down. One approach could b ...

javascripthtmlcsscss-float

React Components Changing Route Leads to Empty Display

My current challenge involves setting up dynamic routing in my application to enable the viewing of products from different stores. Essentially, I am developing an app where users can add stores and browse through their items. I have implemented a dynamic ...

javascripthtmlcssreactjsreact-router

PHP 5's HTML Form Library

Currently in search of an alternative to QuickForm. I have encountered performance problems with QF, specifically when dealing with a large number of options in combobox. I prefer something that is more object-oriented like Zend_Form, but without the exc ...

phphtmlforms

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

javascripthtmlcssruby-on-rails

Switching images with Jquery

Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...

jquerycsshtml

Placing a div with 100% height inside a table-cell div in Firefox and IE

Seeking guidance on placing a div with 100% height inside a table-cell div. Attempted giving display:inline-block; width:100%;height:100%; to the div, successful in Chrome but facing issues in Mozilla and IE. Fiddle link: http://jsfiddle.net/kQM74/2/ HTM ...

htmlcssinternet-explorerfirefox

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

javascripthtmlangularjsgoogle-chrome-extensionbrowser-history

Is there a recommended online tool for converting the files I need assistance with?

I've recently inherited a new website, but when I look at the source code, it appears to be unescaped in JavaScript like so: %3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A Unfortunately, I'm not familiar with what the %XX characters repre ...

htmlconverters

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

htmlcsslayout

Displaying server errors in an Angular componentIn this tutorial, we

As I work on creating a registration page, my focus has been on posting data to the server. I have successfully implemented client-side and server-side validation mechanisms. Managing client-side errors is straightforward using code such as *ngIf="(emailAd ...

javascripthtmlangularforms

Stop images from appearing transparent when placed inside a transparent div

My issue is clearly visible in this image: The div element is transparent and affecting the images inside it. Below is my HTML code: <div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;"> <div class="cnvptr"> ...

javascriptjqueryhtmlcss

Revising the hierarchy between !important in CSS and jQuery

(Attempting to modify CSS properties within a Chrome extension content script) Is it feasible to override CSS properties that have been marked as !important on the webpage? For example, if I aim to eliminate an important border: $(".someclass").css(&apo ...

jquerycsscontent-script

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

javascripthtmlmysqlnode.jsforms