Align the content of a Bootstrap thumbnail in the center by floating the caption to the left of the image

Hello there,

Let me explain what I'm attempting to achieve:

I am looking to center the content (image + caption) of each thumbnail. The image should be span3 and the caption should be span4.

However, here lies my issue:

I can either get the content centered or have the caption float next to the image; But I cannot seem to achieve both simultaneously.

Since I just started using Bootstrap this morning, it's possible that I am misusing some classes.

This is the code I am currently working with: 

<ul class="thumbnails">
    <li class="span12">
        <div class="thumbnail span12">
            <img class="span3" data-src="holder.js/300x200" alt="300x200">
            <div class="caption span4">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
        </div>
    </li> 
</ul>

htmlcsstwitter-bootstrapthumbnailscenter

Answer №1

In my limited experience with bootstrap, it seems that creating a containing div is essential for setting up the overall layout. I recommend checking out the bootstrap documentation's layout section here.

<!-- Make sure to wrap your Twitter content within -->
<div class="container"></div>

Additionally, I found this useful w3resource tutorial on creating thumbnails with twitter bootstrap very helpful. By following this tutorial, I was able to quickly set up a basic example of the thumbnail grid you're aiming for. You can experiment with the code here.

Here is an excerpt from the sample code (more details in the provided link):

<div class="container">
    <ul class="thumbnails">
        <li class="span12">
           <div class="thumbnail">
               <div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div>
            <div class="span5">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
            </div>
        </li>
    </ul>
</div>

Answer №2

Hello There:
I hope this can be of assistance to you :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<style>
body {padding:20px;}
img {margin:0 3px;}
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

</body>
</html>

Answer №3

you also have the option to utilize the offset class in order to create space for your content. Take a look at this code snippet:

<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></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 best way to update the CSS of a DIV that has been populated with external content in JQuery Mobile?

After reading through all the comments, none of the suggested solutions seem to do the trick for me. My issue involves a piece of Jquery code that retrieves content from an external PHP script and updates a div in my application. However, once the new data ...

jquerycssmobilejquery-mobilepage-refresh

Revamping the pre-existing css of Firefox 11

Is there a way to remove the 8px margin from the body tag? I've attempted a few different solutions: * { padding:0; margin:0; } as well as html, body { padding:0; margin:0 !important; } and body { margin:-8px; } and even <body style="m ...

cssfirefoxcss-reset

Are you experiencing issues with the AJAX auto-suggestion system displaying duplicate entries?

I've implemented a search bar on my website that allows users to search for specific titles. To enhance the user experience, I added an auto-completion feature using a simple MySQL table with suggested completions. Here's an image of the setup: ...

javascriptphphtmlcssajax

Customizing CSS styles for various screen dimensions

I am facing an issue with my CSS code where I want to apply different styles for a specific class on smaller devices compared to larger screens. My project primarily uses Bootstrap, but I have also included some custom CSS. On "normal" sized screens, I hav ...

htmlcsstwitter-bootstrap

How to place an icon on the upper right corner of a mat-menu in Angular 6

https://i.sstatic.net/LHfOm.pngI am currently utilizing mat-menu component. <mat-menu #appMenu="matMenu" yPosition="above"> <button mat-menu-item>Settings</button> <button mat-menu-item>Help</button> </mat-menu> &l ...

cssangularangular6angular-material-6

Adding a unique styling to a div with a custom css class

I am experiencing an issue with my CSS file (approval.css) that is defined as a resource and applied to my XPage. Within the css, there is a specific line of code: .appNavBackground {background-color:#ffffd6 ;} When I try to apply this styleClass to a di ...

htmlcssxpages

I'm having trouble pinpointing the mistake in my SQL syntax - PHP (should I refer to the manual for guidance?)

The Issue: Recently, I encountered a problem while attempting to deduct 0.05 from the cash_amount variable in my users database using AJAX, but unfortunately nothing is happening as expected. Upon investigation by directly opening the file in my browser, ...

phpmysqlajaxhtmlphpmyadmin

What is the best way to utilize mysql for storing user state in order to restrict them from taking a particular action more than once per day?

< button type="button" id="daily-reward-button">Claim</button> 1) When a user clicks this button, it should be disabled which will result in the user being banned in the MYSQL database and unable to click the button again. 2) The button shoul ...

javaphphtmlmysqlwordpress

The presence of <!--[if lte IE8]>< ![endif]--> on the website is causing problems with the dropdown

Check out my link: Problem #1: Why does "" appear on the site in Internet Explorer? The markup seems correct, so what is causing this to show up? Problem #2: In Internet Explorer, there is an issue with clicking on subnav items above the jQuery slider wh ...

phphtmlcss

Creating a pop-up confirmation message upon email submission through React and custom CSS styling

In my React project, I've created an email form and included the <div className="msg">Message has been sent</div> class. However, I only want this message to display when the message has successfully been sent (status: true). How ...

javascriptcssreactjsnodemailer

What could be causing the utf8 to not function properly on my php webpage?

Despite searching for numerous solutions, I am still facing issues with UTF8. The "special" characters are not displaying correctly in my browser. Here is the setup I am using: - PHP Designer 8 - Wampserver 3.1.4_x86 - MySQL 5.6 - Navicat10 ...

phphtmlmysqlwampservernavicat

Troubleshooting Issue with Bootstrap 4 Modal Varying Content Display

Dealing with a minor issue where I'm unable to get a modal to fetch data from an HTML table and populate it into a Bootstrap 4 Modal. I've attempted various methods as evident in the code snippets below. Currently in a learning phase, I need to ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

Discover the power of uploading images using HTML5 with PHP

Is there a way to retrieve values of uploaded images after clicking on the submit button using $_POST in PHP (with image upload through HTML5)? For an example of HTML5 image upload, you can check out this link You can access the demo at the following lin ...

phpjavascriptjqueryhtml

Expanding an HTML table with a click: A step-by-step guide

I have successfully generated an HTML table using JavaScript. However, I now need to display additional data in a row by expanding it on click. Table functionality: The table is populated with brands and their respective items. When a brand is clicked, ...

javascriptjqueryhtmlhtml-tablebootstrap-4

Creating a form that can identify both letters and numbers using JavaScript

Is it possible to create an <input> field that can recognize both letters and numbers while disregarding spaces and capitalization? Here is my current progress, aiming for the feedback to display as "right" when 9 H 6 U 8 f is entered in the field, ...

javascripthtml

Do you have any tips on incorporating a sinking hover effect to an image or link?

Custom Arrow Icon I Want to Add Animation To I have designed an arrow icon image that functions as a link. It is positioned on top of a background image. When the user hovers over the arrow, I would like to implement a "sink" effect similar to the example ...

htmlcss

I wonder where the file from the HTML form download has originated

Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...

javascriptpythonhtmlajaxgoogle-chrome

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

Here is the code snippet I've been working on. The first part consists of JavaScript code, and the second part includes HTML. $('#table').on('check.bs.table', function (e, row) { checkedRows.push({First: row.fname, Second: row ...

javascriptjqueryhtmltwitter-bootstrap

Ways to adjust the dimensions of a textarea based on character count

When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...

htmlcsstextarea