Attempting to align a static width divider and text aligned to the left within a Bootstrap column

I'm attempting to center an element within a Bootstrap column that comprises a fixed-width image (which is narrower than the column width) and some text below the image that aligns with the left edge of the image (and not with the left edge of the Bootstrap column).

Here's an example of my code:

.imgWidth {
  max-width:150px;
}
        <div class="row text-center">
            <div class="col-xs-12 col-sm-12 col-md-2 text-center">    
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
                  <div class="text-left">text under image</div>  
            </div>
            <div class="col-xs-12 col-sm-12 col-md-2 text-center">         
            </div>
        </div>

This implementation centers the image in the column, but the text ends up aligned with the column instead of directly beneath the image. Is there a way to ensure that text is properly aligned with the image above it? I've attempted various code combinations without any success.

htmlcsstwitter-bootstrap

Answer №1

Have you considered adding a specific class to the text divs within the columns and setting a max-width for them, along with applying margin auto to those text divs as well?

CSS:

.imgWidth, .someClass {
    max-width:150px;
    margin: auto;
}

HTML:

<div class="row text-center">
    <div class="col-xs-12 col-md-2 text-center">    
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
         <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div>  
          <div class="text-left someClass">text under image</div>  
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
         <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
          <div class="text-left someClass">text under image</div>  
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
         <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
          <div class="text-left someClass">text under image</div>  
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
         <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
          <div class="text-left someClass">text under image</div>  
    </div>
    <div class="col-xs-12 col-md-2 text-center">         
    </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

Retrieve the website address from a string of HTML code

I'm struggling to extract the URL from a given String that contains an HTTP response with an HREF tag. I've managed to identify the start of the links, but I need to stop the string as soon as the HREF tag ends. How can I accomplish this? public ...

javahtmlhtml-parsing

aiming at another iframe using its unique identifier

I currently have three IFrames set up in my index.html <html> <head> <title>Frame</title> <style> .Top { float:both; width:99.7%; height:18%; } .menu { float:left; width:13%; height:82%; } .mai ...

javascripthtmlcssiframe

"Unlocking the power of Bootstrap modals in Django

Using Django, I have a loop of div elements. When I click on a div, I want a modal to be displayed. Here is my HTML code: {% for object in theobjects %} <div class="row" style="margin-top:0.5%;"> <div name="traitement" <!-- onclic ...

javascriptjquerycssdjangotwitter-bootstrap

Why does the slider only slide once, what could be the reason for

Can someone help me with my slider issue? It runs only once and stops on the 2nd image. I need it to keep sliding every 5 seconds. Check out the source: http://codepen.io/zuraizm/pen/vGDHl Here is the Javascript code: var slideCount = $('#slider ul ...

javascriptjqueryhtmlsliderjquery-slider

Displaying a webpage in JavaFX Scene Builder

Is it possible to display a webpage or an HTML file using JavaFX Scene Builder? Thank you. ...

javafxhtml

Using the double class within the .solution environment and adjusting the label of the .solution environment using CSS styling

Currently constructing a book with the use of quarto, where the inclusion of theorems, lemmas, corollaries, and other elements is necessary. In the quarto documentation, as seen here, it is advised to utilize the proof, remark, and solution environments fo ...

htmlcssquarto

My page is experiencing delays due to setInterval

Currently, I am delving into the world of Chrome Extension development and am faced with a roadblock in replacing elements on a live chat page. While most of my tasks are running smoothly, the one thing causing issues is the setInterval option that trigger ...

javascriptjqueryhtmlcss

Using nodeJS to showcase content on a web page

I'm relatively new to NodeJS, and I am trying to figure out if there is a way to utilize NodeJS similar to JavaScript. My goal is to retrieve data from a database and display it within a div on my index.html page. When attempting to use querySelector, ...

javascripthtmlnode.jsexpress

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

htmlgoogle-chromefirefoxsafaritypography

Unusual behavior observed with AngularJS checkboxes

Our group of friends is collaborating on a new project. This is my second time working with AngularJS, and we're currently utilizing version 1.2.3. Although I have some experience, there are moments when I find AngularJS's behavior perplexing, a ...

javascripthtmlangularjsangularjs-directive

Is there a way to confirm when all 3 html pages (panes) have been completely refreshed?

I have a webpage with 4 panes, each implemented as separate HTML pages. The last pane needs to perform an action when the previous 3 panes are refreshed. For instance, while the first 3 panes are refreshing, the last pane should display a "LOADING" message ...

javascriptjqueryhtml

How can I effectively design a vertical table with a split background for optimal visual appeal?

Is there a way to creatively present this data with a split background using html and css? https://i.sstatic.net/qsCOM.png ...

htmlcssvue.jshtml-tablebootstrap-4

dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer. <style type="text/css"> #dgwrap { HEIGHT: ...

htmlcsssharepoint

Is it possible to incorporate percentage-based widths within a fixed layout design on a webpage?

I've been delving into the concepts of fixed, fluid, and responsive web page design. One of the resources I stumbled upon is this article about fixed vs. fluid layouts. In the article, it mentions that "A fixed website layout has a wrapper that is a f ...

cssresponsive-designfluid-layoutfixed-width

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

javascripthtmlcss

Using HTML and Javascript files with AJAX can sometimes be problematic due to compatibility issues

Throughout the past seven years, I have dedicated my time to programming small websites for offline and private usage. Each project consists of an html file that links to a css file and a javascript file. The javascript file utilizes AJAX to load content f ...

javascripthtmlajax

Implement a full-width dropdown menu with Bootstrap 4

Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width ...

htmlcssbootstrap-4angular9

Inserting pictures onto Bootstrap SVGs

Currently working on a website using Bootstrap 5 and incorporating an element from BS5 templates: <div class="col" data-aos="fade-up" data-aos-delay="200"> <div class="card shadow-sm"> ...

htmlcsstwitter-bootstrapsvgbootstrap-5

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

Navigating Through the DOM with Selenium using XPath Axes

Currently, I am developing Selenium tests for a dynamic web page. Within this section of code, I am extracting data from an Excel sheet and verifying if a specific element exists on the webpage. I have annotated the critical part of the code with comments ...

javajavascripthtmlseleniumxpath