How to center text in a DIV using CSS Bootstrap?

I'm a beginner in front-end development and I'm struggling to center the text below the image within this div. I want the text centered just below the image. I'm using Bootstrap for this project, and here's the code snippet I'm working with:

<div class="container">
            <div class="row">
              <div class="col">
                    <a href="/abrircampanha">
                    <img src="../images/IconAbrirCampanha.png" class="img-thumbnail" alt="Abrir">
                    
                    </a>
              </div>
              <div class="col">
                
                <a href="/abrircampanha">
                    <img src="../images/IconNovaCampanha.png" class="img-thumbnail" alt="Abrir">
                    <h3 class="h6 mb-3"> Abrir campanha </h3>

                    
                    </a>
              </div>

            </div>
          </div>

How can I effectively center the text underneath the image?

cssbootstrap-4bootstrap-5

Answer №1

To align text in the center using bootstrap, simply apply the text-center class

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

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

javascriptcssreactjsmaterial-ui

Customizing Bootstrap Vue to prevent tooltips from opening on hover

I am currently using a tooltip similar to the example shown on Toggle Tooltip: <template> <div class="text-center"> <div> <b-button id="tooltip-button-1" variant="primary">I have a tooltip</b-button> </div& ...

javascriptvue.jsvuejs2bootstrap-4bootstrap-vue

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic. This is how my css/html is currently structured: .links { display: block; } .links a { color: #000000; text-decoratio ...

javascripthtmlcss

Seeking ways to ensure my component maximizes available space using Tailwind CSS

I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...

cssangulartailwind-cssangular-router

Dealing with a problem in CSS Flexbox while aligning child elements using the `align-self`

Check out this test code here - https://jsfiddle.net/8dgeh9r3/1/ I have set up two scenarios to simulate. In the first scenario, there is a main parent flex container with multiple intermediary parents (which are also flex boxes that inherit properties fr ...

htmlcssflexbox

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

csstwitter-bootstrap-3

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

Looking for a reliable tool to check your CSS classes and tidy up your code effectively?

It seems like a common issue with a straightforward solution. I have numerous CSS selectors scattered across various files, many of which may be unnecessary and a directory full of HTML files. My goal is to identify all redundant selectors in my CSS within ...

css

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

I am currently working on a JSP web application without the support of any framework, unfortunately. This application is intended to serve multiple customers, each with their unique set of colors and company logos. The overall layout of the CSS will remai ...

htmlcssjsptomcatservlets

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

htmlcss

CSS transformation: skewing without any blurring effects

Is there a way to create tilted drivers with borders and text without sacrificing the sharpness of the font and border? I have used the transform: skew(); CSS rule for tilting, but it has caused blurriness. How can I add font smoothing and maintain sharp b ...

cssfontscss-transforms

Creating a full-width navbar in Bootstrap 4 using the container-fluid

Looking for assistance with making a Bootstrap navbar fill the entire width of a container-fluid using only CSS, as I do not have access to the HTML code. It works outside the container-fluid but can someone help me achieve the same result within the con ...

csstwitter-bootstrapbootstrap-4

What is the best way to prevent a page from refreshing every second when the Bootstrap modal is being displayed or active?

I am working on a project that involves two PHP pages. In the first page, I have set up a system to display data from a MySQL database using Ajax, with the content refreshing every second. The second page contains the PHP code responsible for fetching the ...

phpjquerymysqlajaxbootstrap-4

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

Learn how to use Bootstrap to position my component below another component on the webpage

Understanding the basics of Bootstrap and how to assign sizes to columns is one thing, but I seem to be stuck on a simple use case. Here is the scenario: I have two components for a Todo list application: Component 'New Todo' (Form Input field ...

javascriptbootstrap-5

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: ht ...

htmltwitter-bootstrapcss

Close the Bootstrap Modal by clicking the back button within SweetAlert

**How can I close a Bootstrap modal when clicking the back button in SweetAlert? I have tried using modal.hide() but it's not working. I am using Bootstrap version 5 and even checked their documentation with no luck. Does anyone know how to achieve th ...

javascriptreactjsbootstrap-5sweetalert

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

Insider's guide to showcasing code in vibrant colors using Python Django

Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...

pythonhtmlcssdjangocolors

What is the easiest method to design an email subscription form that remains fixed on the top right corner of the screen?

Looking for advice on setting up a sleek email signup bar that remains at the top of the browser while users scroll and navigate through different pages. I am working with WordPress and have jquery already loaded, but have not yet worked with either. Up ...

javascriptjqueryhtmlcsswordpress