Bootstrap row aligning issue

Jordan Axe Published at Dev

Jordan Axe

The following is my HTML:

<div class=container">
   <div class="row">
    <h2 class="text-center">Enter your name below</h2>
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
   </div>
</div>

My css is the following (along with bootstrap):

.profile-picture
{
    max-width: 200px;
    max-height: 200px;
}

.center
{
    margin: 0 auto;
    float: none;
}

This produces the following output: enter image description here

The way I want it to display is as shown below: enter image description here

How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?

Mike Barwick

The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...

Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)

Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).

<div class=container">
    <div class="row">
        <h2 class="text-center">Enter your name below</h2>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
        </div>
        <div class="col-md-6">
            <h3>Profile name: N/A <br />
                Status: Waiting for user input</h3>
        </div>
    </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-4

Comments

0 comments

From Dev

Related Related

Article

Bootstrap row aligning issue

Bootstrap row aligning issue

BootStrap Row not aligning

Issue with Aligning Radio Button Bootstrap

Issue with bootstrap aligning textbox next to button

Issue aligning items using Bootstrap and Css

Issue with Bootstrap grid system and vertical aligning

Bootstrap: Aligning two buttons on the same row

Bootstrap: Aligning two buttons on the same row

Bootstrap row issue

Bootstrap Row spacing issue

Bootstrap 4 row issue

Bootstrap CSS row alignment issue

Bootstrap Footer Column/Row issue

Issue aligning this with CSS

Issue aligning images properly

Aligning TextViews in same row

Aligning expandable divs in row

aligning the table row in HTML

Aligning a row of plots in matplotlib

Bootstrap - Aligning Yes No with Label

Aligning the bootstrap glyphicon

Elements not aligning in Bootstrap

Bootstrap columns not aligning correctly

Aligning Circles horizontally in Bootstrap

Twitter bootstrap grid not aligning

Trouble aligning inputs in bootstrap

Bootstrap columns not aligning correctly

Twitter Bootstrap aligning checkbox

Bootstrap input is not aligning properly

aligning controls vertically in bootstrap