Centering text under a round image in Bootstrap 3: A step-by-step guide

When using bootstrap 3, I have noticed that the text is not perfectly aligned under a circular image. This issue becomes more apparent on various screens, in bootstrap modals, and when dealing with different languages. I would like to avoid adding margin-left because it can cause alignment problems on certain screens. Is there a better solution for this alignment issue?

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
  <div class="container">
  <div class="row">
  <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Arabic </span>
    </div>
    </div>  
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Dari </span>
    </div>
    </div> 
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Pashto </span>
    </div>
    </div>  
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Kurdish </span>
    </div>
    </div>  
    
  </div>
  
  <div class="row">
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Farsi </span>
    </div>
    </div>  
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Tigrinya </span>
    </div>
    </div>  
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> Amharic </span>
    </div>
    </div>  
    
      <div class="col-xs-3">
    <div class="row">
      <img src="https://i.imgur.com/ABwB1YD.png" alt="">
    </div>
    <div class="row">
      <span class="country text-center"> English </span>
    </div>
    </div>  
  </div>
  
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To easily improve your code, simply include the text-center class in all instances of col-xs-*. This will center images and text within the col-xs-* containers. To better visualize the effect, background colors have been added.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
<div class="container">
  <div class="row">
    <div class="col-xs-3 text-center bg-info">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Arabic </span>
      </div>
    </div>  
    
    <div class="col-xs-3 text-center bg-warning">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Dari </span>
      </div>
    </div> 
    
    <div class="col-xs-3 text-center bg-info">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Pashto </span>
      </div>
    </div>  
    
    <div class="col-xs-3 text-center bg-warning">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Kurdish </span>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-3 text-center bg-warning">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Farsi </span>
      </div>
    </div>  
    
    <div class="col-xs-3 text-center bg-info">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Tigrinya </span>
      </div>
    </div>  
    
    <div class="col-xs-3 text-center bg-warning">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Amharic </span>
      </div>
    </div>  
    
    <div class="col-xs-3 text-center bg-info">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> English </span>
      </div>
    </div>  
  </div>
  
</div>

Answer №2

To center align the image and text, you can create a custom class called .center and add it to your outermost .container div. This can be achieved by using text-align: center;.

.center {
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container center">
  <div class="row">
    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Arabic </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Dari </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Pashto </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Kurdish </span>
      </div>
    </div>

  </div>

  <div class="row">
    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Farsi </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Tigrinya </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> Amharic </span>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="row">
        <img src="https://i.imgur.com/ABwB1YD.png" alt="">
      </div>
      <div class="row">
        <span class="country text-center"> English </span>
      </div>
    </div>
  </div>

</div>

Answer №3

To make the layout more concise, you can incorporate just one row and then align both the image and text in the center.

<div class="col-xs-3">
    <div class="row text-center">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
            <br>
            <span class="country text-center"> Arabic </span>
    </div>
</div>

Just a quick update: if needed, you can still utilize the columns feature as well... I've included them in the shortened version of your example for better reference.

Answer №4

Flexbox Styling with CSS

Use the following properties for flexbox layout:
display : flex;
justify-content : center;
align-items : center

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

How can I show hidden column names in the Sencha Touch 2 date picker component with CSS?

I am currently utilizing a date and time picker that has the ability to display ['month', 'day', 'year','hour','minute','ampm']. You can find the source code here. Although everything is function ...

javascriptcsstimesencha-touch-2datetimepicker

Google has not detected any hreflang return tag

My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...

htmlseogoogle-searchcanonical-linkhreflang

Using JQuery to automatically scroll and anchor to the bottom of a dynamically populated div, but only if the user doesn't

I am attempting to achieve the functionality of automatically scrolling to the bottom of a div with the ID #chat-feed. The overflow for this div is set to auto, and I want it to remain at the bottom unless a user manually scrolls up. If they do scroll up, ...

javascriptjqueryhtmlajax

Is there a way for me to view the specifics by hovering over a particular box?

Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear. HTML <nav> <div> <div class="nav-container"> <a href="./about.html" ...

javascriptcss

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Implement changes to C# code via website or database management

I've been researching different methods of retrieving content from a web server or database online, and I've come across a lot of discussions about using the WWW method. However, I'm looking for a solution where I don't have to constant ...

c#phphtmlunity-game-engineunity-webgl

Adding a prefix to the imported CSS file

My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application. To achieve this, I provide website owners with minified JS and CSS files that they can inser ...

javascripthtmlcssnode.jsreactjs

unable to connect a value with the radio button

I am struggling to incorporate a radio group within a list of items. I am facing difficulty in setting the radio button as checked based on the value provided. Can anyone provide me with some guidance? Here is the HTML code snippet: <div *ngFor=" ...

javascripthtmlangulartypescript

Customize your select element's background using jQuery when the content changes

Here is a select element with different options to choose from: <select class="state"> <option value="1">Done</option> <option value="2">Closed</option> <option value="2">Open</option> <option v ...

javascriptjqueryhtml

Dynamic Code for Removing List Items Based on Date

I need assistance in resolving an issue with my company's website design and function. Specifically, I am working on a page that displays a list of events where employees will be present throughout the year. Here is an example: <div class="contai ...

javascriptjqueryhtmlcss

How Can I Utilize a URL Parameter Twice to Execute SQL Queries in Two asp.DataLists on a Single Page?

I've been trying everything, but I just can't seem to get one query to function properly. My goal is to retrieve information from the SQL Server database in two separate queries - one for album names (based on URL parameter) and another for song ...

c#htmlsql-serverselect

No match was found for the reverse of 'idname' with arguments '()'. Attempted 1 pattern: ['viewRegistration/(?P<pk_test>[0-9]+)/$']

When setting up my views, I have the following code: def home(request): if request.user.participant: current_user = request.user subscriptionUser = int(Subscription.objects.get(participant=current_user.participant).id) else ...

pythonhtmldjangoview

Tips for adding an image to a single product page without including it in the related products section

I have a WooCommerce website and I successfully inserted an image element on a single product page using a conditional tag. However, the same image is also appearing in related products near the website footer in a loop. I do not want these extra images to ...

phphtmlwordpresswoocommerce

A dynamic Java web framework that combines RESTful JSON services with the power of HTML5 and jQuery AJAX functionality

As we approach the year 2013, the era of HTML5, jQuery has solidified itself as the go-to standard for web Javascript development. Back in 2010, this link was quite popular: I am searching for a Java web framework that can expose domain classes through R ...

javajqueryjsonhtmlrest

Align a div in the center when an anchor link is clicked

Is there a way to create an anchor link that not only scrolls down to a specific div on the page, but also centers it on the screen rather than positioning it at the top? While I have been able to achieve a similar effect by using absolute positioning in ...

javascripthtmlanchorcenter

PHP Question: Why are variables within <?php ?> not accessible within if/else statements?

I'm currently working on a basic program that involves the user inputting a number, which is then processed to generate a series of random similar numbers. After this step, the program prompts the user to select the correct variable, which will be va ...

phphtmlformspostget

Having two owl carousels on one page is causing some issues

Struggling to implement two owl carousels on my page. Gif: View Gif Here The first carousel (shown at the top in the gif) is functioning perfectly. However, the second one (beneath the first in the gif) is not behaving as expected. Instead of displaying ...

htmlcssowl-carouselowl-carousel-2

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

htmljquerycssvisual-web-developer

Creating uniform height thumbnails in Bootstrap 3 (similar to equal height cards in Bootstrap 4)

I have a series of thumbnails in a row, and I would like them to have equal height. Below is the code I am using: <div class="row text-center"> <div class="col-md-3 col-sm-6"> <div class="thumbnail"> <div class ...

twitter-bootstrap-3twitter-bootstrap-4

Having trouble accessing the href attribute after clicking on an <a> tag with JavaScript

My issue lies in retrieving the href attribute of <a> tags when there is another element nested inside them: Here's the code snippet: const $elems = document.querySelectorAll('.content-container a') var elems = Array.from($elems) e ...

javascripthtmljavascript-objects