Achieving Perfect Alignment in Bootstrap Containers

My form is not aligned in the center of my page. Below is my HTML file and the resulting output. How can I center my view?

https://i.sstatic.net/mqXr8.png

Here is the code snippet from my HTML:

<div class="container">
<div class='row justify-content-center'>
    <div class='col'>
    <p></p>

        <h1>Member Details: </h1>
            <p>Name: JP</p>
            <p>Surname: Roux</p>
            <p>ID Nr: 7604195133089</p>
            <p>Mobile Nr: 0741115552</p>
            <p>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79d87b783928483d994989a">[email protected]</a></p>
            <p>D.O.B: 1976-04-19</p>
            <p>Language: Afrikaans</p> 
            <p>Interests:
                <ul>
                    <li>Tennis</li>
                    <li>Squash</li>
                </ul>
            </p>
            <p>Created At: 2018-06-06 09:31:31</p>
        <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
        </div>
    </div>
</div>

cssbootstrap-4

Answer №1

Check out this example of a form layout:

<div class="container">
  <div class='row justify-content-center'>
    <div class='col-6 border border-primary'>
      <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="John">
        <br> Last name:<br>
        <input type="text" name="lastname" value="Doe">
        <br><br>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>

Click here for live demo.

Answer №2

Do not rely on justify-content-center for aligning the row content. Instead, utilize d-flex and justify-content-center for the column, enclosing its content within a w-auto div.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class='col d-flex justify-content-center'>
      <div class="w-auto">
        <p></p>

        <h1>Member Details: </h1>
        <p>Name: JP</p>
        <p>Surname: Roux</p>
        <p>ID Nr: 7604195133089</p>
        <p>Mobile Nr: 0741115552</p>
        <p>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d071d2d19081e19430e0200">[email protected]</a></p>
        <p>D.O.B: 1976-04-19</p>
        <p>Language: Afrikaans</p> 
        <p>Interests:
        <ul>
          <li>Tennis</li>
          <li>Squash</li>
        </ul>
        </p>
      <p>Created At: 2018-06-06 09:31:31</p>
      <div class="page-header">
        <a href="http://tomcrud.test:8080/members/14/edit" class="btn btn-info">Edit</a>
      </div>
    </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

Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example: This particular website calculates value using a .js script embedded in the HTML itself. Upon inspecting the source code by pressing F12, we can locate the element containing the calculated valu ...

javascripthtmljquerycssreverse-engineering

Are the nav, footer, header tags not functioning correctly?

Hi everyone, I'm a newcomer to StackOverFlow! I have a question about the necessity of tags like Nav, footer, header, etc. Do they serve any purpose other than indicating what each section is about? I've heard they might be good for SEO rankings ...

htmlcsstagsnavbarsemantics

Can the minimum length be automatically filled between two elements?

I'm struggling to find a way to adjust the spacing of the "auto filling in" dots to ensure a minimum length. Sometimes, on smaller screens, there are only one or two dots visible between items. Is there a way to set a minimum length for the dots in th ...

javascripthtmlcssspace

How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...

cssreactjsmaterial-ui

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

javascriptcssreactjsmaterial-ui

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...

htmlcssasp.net

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

How to Use CSS to Position an Image Within a Div?

.framework { position: absolute; } .headerimg { margin: 0 auto; } <body> <div class="framework"> <div class="header"> <div class="headerimg"> <img src="Header.jpg"> ...

htmlcss

Tips for adjusting the font size within the MUI TextField Label

I'm looking to adjust the label fontSize in the material ui TextField component. I've discovered the InputLabelProps property which has been helpful, but as shown in the image below, the label appears too cramped when focused. https://i.sstatic. ...

cssreactjsmaterial-uilabel

Switch Image on Hover in Panel Group

After delving into Bootstrap, I encountered an issue. I have a Panel-Group with an image and some text. The challenge is switching the image on hover, but it should change when hovering over the panel, not just the image itself. I've found solutio ...

jqueryhtmlcssimagebootstrap-4

help with coding in html and css

Hey there, I’m currently working on creating a loading page for my website, but I seem to be facing an issue with a white line appearing along the top and one running down the left side. If anyone could provide me with some assistance on this matter, I ...

htmlcss

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: htt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to Design ASP.NET Buttons for Users with Disabilities

Recently, I attempted to style an asp button using CSS. The Button HTML: <asp:Button ID="btnClockin" runat="server" Text="Clock In" class="FullWidthButton" /> Here is the CSS code: .FullWidthButton {width:100%;} Everything was working fine until ...

asp.netcss

The shown.bs.tab event is causing an issue where the previous active tab cannot be retrieved

Reference from https://getbootstrap.com/docs/4.0/components/navs/#events states that I am utilizing e.relatedTarget in the shown.bs.tab event to retrieve the previous active tab for applying some CSS styles. However, currently, e.relatedTarget is returning ...

javascriptjquerybootstrap-4tabsnavigation

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

androidhtmlcssprinting

color of the foreground/background input in a dropdown menu that

I am attempting to modify the foreground or background color utilized by a dash searchable dropdown when text is entered for searching in the list. The input text is currently black, which makes it extremely difficult to read when using a dark theme. Wit ...

pythoncssplotlydropdownplotly-dash

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

javascriptjqueryhtmlcss

Adjusting boxes (both up and across) as the window is resized with Bootstrap 4

CSS .main{ border-radius: 20px; margin-left: 20px; margin-right: 20px } .left{ max-width: 250px; height: 1%; border-radius: 20px; } .right{ max-width: 250px; height: 1%; border-radius: 20px; } .parent-containe ...

htmlcsstwitter-bootstrapbootstrap-4