Centering text using CSS Bootstrap

Hey everyone,

I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on?

<footer class="row p-1 mt-3 bg-primary text-white">
    <p class="text-center">footer</p>
</footer>

Thank you, Ramen Lover

Answer №1

There are various solutions available

Approach 1

I don't believe using row provides any benefit in this scenario, so feel free to remove it unless there are col- elements within your footer

 <footer class="p-1 mt-3 bg-primary text-white">
            <p class="text-center">footer</p>
     </footer>

Approach 2

If you prefer to keep the row, simply include the class justify-content-center to your row element

<footer class="row p-1 mt-3 bg-primary text-white justify-content-center">
        <p class="text-center">footer</p>
 </footer>

Approach 3

Add a new element and assign the class col-12 to it

 <footer class="row p-1 mt-3 bg-primary text-white ">
             <div class="col-12">
                 <p class="text-center">footer</p>
             </div>
     </footer>

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

Ways to Create a Webpage with a Single Color Palette

Struggling to update the background color on my webpage and hitting a wall. Even with content, the black background only extends as far as the content does. I've experimented with extending the content, using the body selector, and universal selector ...

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

The functionality of the Bootstrap grid system has proven to be ineffective

Hello, I am currently using Bootstrap 3 and attempting to configure my template. It seems like I may not have a full grasp on the concept of 'row' in Bootstrap because my template is not behaving as expected. Take a look at this full screen fidd ...

I am having trouble connecting my CSS file to my EJS file

I'm having trouble including my external main.css file in my header.ejs file. I've designated my CSS file as public in my backend Node.js with Express.js server (index.js) using this static code: app.use(express.static("public")); The ...

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

What is the process for switching directories and renaming a file when uploading in nodeJs?

I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...

Adjusting the <div> size for optimal display on iPhone and iPad screens

I am having an issue with my jQuery Mobile app. I have a page with a header and footer, and the main content consists of 4 images arranged in a 2x2 grid format. Since I couldn't get JM grid to work, I created my own grid using a div container. Here is ...

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

My HTML file loads my OpenLayers JavaScript file (which displays a map frame) when opened directly. However, when running the HTML from my Flask python app, the JavaScript file/object fails to load (resulting in no map display, just some heading text). I ...

Is it possible for the .find() method to extract values from <a> tags?

I'm currently working on retrieving values from an anchor tag using jQuery instead of a button in my HTML. I want to style it with images because a button doesn't match the look of my website. Here's what I've been trying: var mssg_i ...

How can we prevent floating li elements from overlapping the parent div element?

What could be causing the yellow stripe (#header) to disappear when I apply "float left;" to "#header ul li"? Despite setting a fixed size for "#header ul li", I anticipated that the list items would line up next to each other horizontally, not exceeding t ...

Enhancing User Experience with Interactive React Hover Effects

Hello, I have tried various combinations but still cannot get the desired background color to display when hovering over my <p> element. I am looking for a CSS-only solution and not interested in using JavaScript hover events. I would appreciate it ...

Animating the navbar with CSS transitions

https://i.sstatic.net/cV3X6.png Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should dis ...

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

The Bootstrap 4 navigation bar remains expanded on tablet screens

I recently obtained and modified a basic bootstrap 4 theme. By customization, I mean that I ensured all menu items have the same margin and added my logo. The issue I encountered is that on tablets, the navbar does not collapse as expected. I have attache ...

Border provides spacing within a div using the box-sizing property set to border-box

I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...

Padding problem arises when you wrap an image with an anchor tag

I'm having an issue with a div containing an anchor-wrapped image, as there seems to be extra padding at the bottom of the div. How can I remove this? HTML: <div id="lineup"> <div class="line-up-click"> ...

Bootstrap struggles to create panels of uniform size

Here is the code snippet I am currently working with: <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw fa-tasks"></i> Extreme Performance</ ...

All hyperlinks are displayed as a single entity

I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue? After updating my code to include the entire div, it seems that there is something within the ...