Center align a row with the help of Bootstrap 4.0

Here is some code with Bootstrap 4 classes that I am working with:

<div class="container">
    <div class="row">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;
background: #fff;
padding-left: 20px;
font-size: 15px;
color: #000;
border: 1px solid #596672;
border-radius: 30px;
width: 100%;">
                    <button type="submit" style="
    position: absolute;
    height: 40px;
    border: none;
    color: #fff;
    background: #2EBDBE;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
    top: 5px;
    right: 5px;
    font-size: 13px;
    font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

I currently have the content aligned to the left, but I need it centered. How can I achieve this alignment using Bootstrap?

Answer №1

If you want to center content using Bootstrap 4, you can utilize the utility class justify-content-center along with the row class like this:

<div class="container">
    <div class="row justify-content-center">

        <div class="col-xl-4 col-md-6 col-lg-4">
            <div class="footer_widget">
                <h3 class="footer_title">
                    Enter your number
                </h3>
                <form asp-action="Search" method="get" class="newsletter_form">
                    <input type="text" name="number" placeholder="Enter your number" style="height: 50px;background: #fff;padding-left: 20px;font-size: 15px;color: #000;border: 1px solid #596672;border-radius: 30px;width: 100%;">
                    <button type="submit" style="position: absolute;height: 40px; border: none;color: #fff;background: #2EBDBE; padding: 0 22px; cursor: pointer; border-radius: 30px; top: 5px; right: 5px; font-size: 13px; font-weight: 500;">
                        Submit
                    </button>
                </form>
                <p class="newsletter_text">
                    Enter your number/name and click on submit ....
                </p>
            </div>
        </div>

    </div>
</div>

I trust this information is beneficial to you.

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

Bootstrap - How can I overlay a card onto a jumbotron for the most optimal display?

Currently, I am in the midst of a project and my goal is to position the card on top of the jumbotron. Even though the card will be within the body of the website, I am finding it challenging to achieve this using Bootstrap. The image below provides an exa ...

Is there a way to showcase XML in a web browser while maintaining its whitespace and preserving its preformatted text?

In an attempt to simplify the process of formatting my reports, I am considering creating a basic XML language. This would resemble something like this: <?xml-stylesheet href="./report.css"?> <report> <title>A Tale of Two Cities</ ...

Applying specific style properties in styled-components can vary based on certain conditions

Is it possible to apply multiple properties at once? const Button = styled.div` color: blue; opacity: 0.6; background-color: #ccc; ` I want to apply styles for the active state without having to specify conditions for each property individually. Ho ...

The functionality of 'ngbPopover' in Ng-bootstrap may be affected if the parent container contains a 'transform' css property

Struggling to implement Ng-bootstrap's 'ngbPopover' functionality, I encountered a frustrating issue where the popover would not display after clicking the button. After numerous hours of troubleshooting, I was relieved to discover the root ...

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

"Enhance Your Website Navigation with HTML5 and CSS - Creating a Wide

I've spent a full day trying to solve this issue, but unfortunately, I haven't been able to achieve any results. My goal is to create a menu with collapsible links that expand horizontally when hovering over the parent <li>. Essentially, it ...

How can I move a child element off-center within a parent div in CSS without affecting the position of the other child

Below is an example of code that demonstrates what I'm trying to accomplish: <nav className="flex flex-row justify-between items-center w-full h-[100px]"> <div className="flex flex-row items-center sm:pl-0 ml-auto"> ...

Issue with Bootstrap navigation bar extending webpage length beyond desired size

I recently constructed a website using the latest version of Bootstrap, commencing with the cover template. After swapping the navbar with one from the documentation, I noticed that the webpage now extends beyond the screen's length. At the end of the ...

Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; } .overlay1 { position: absolute; top: 0; right: .1px; bo ...

The elements within the HTML, CSS, and Bootstrap are all clashing and

Website Output https://i.sstatic.net/5JVyg.jpg I've been working on a small website with a bootstrap carousel, and in this specific section of the program, the Bootstrap and HTML/CSS elements overlap by default. I'm not sure how to separate the ...

Guide to animating an HTML element with CSS

Recently, I've been pondering the process of animating an HTML element solely through CSS. Unfortunately, my knowledge on the subject is quite lacking... I attempted to utilize the animate keyword in pursuit of this goal ...

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

I'm attempting to incorporate span icons/glyph-icons using Angular within a td before displaying the country. I've utilized the code below to achieve this, but I'm looking for a more dynamic and elegant solution. Your assistance is greatly a ...

What could be causing the CSS and HTML connection to fail?

I am currently working with Flask on the Atom editor to build a website. Despite specifying the correct path for the CSS file in the link, every time I load the page, it appears without any styling. I have attempted changing the paths multiple times with n ...

Increasing the size of a container without displacing the elements beneath it

There is an element on my webpage that, when hovered over, expands to reveal hidden text. The issue I'm facing is that this expansion causes the content below it to shift position. I attempted to use position:absolute, but it did not have the desired ...

Tips for effectively utilizing the container class in bootstrap

As I work on developing a responsive website, I am utilizing Bootstrap 4 to create a navigation bar. The question arises, does the version of Bootstrap truly make a difference in this case? Furthermore, is the navigation bar essentially the most prominent ...

When attempting to open the HTML file through an Express application, the background image specified by `background-image: url()` may

Upon opening the html file by directly clicking on it, the background-image styled with url() functions correctly. However, when I open this file within an express app using res.sendFile(), the background-image fails to display. Interestingly, all other CS ...

Tips for creating space between a radio button and its label text

I'm having an issue with the spacing between my radio button and radio button text box in my struts tag. It seems to be congested. Any suggestions on how to create more space between them? <div class="form-group"> <label class="col-lg- ...

What methods can be used to decrease the width of a space?

I currently have this on my website: https://i.sstatic.net/lfBum.png But I want to organize the 3 elements to look like this: https://i.sstatic.net/SwyMs.png <th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">DAY 1<br> ...