Combining inline and vertical form layouts with Bootstrap

I would like to create something similar to this https://i.sstatic.net/gFTO3.jpg

so I followed these steps

   <div class="container">
    <div class="row">
        <div class="page-account-box">
            <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
                <div class="account-box">
                    <div class="picture_account">
                        <img src="~/images/d2.jpg" class="imgFormat " />
                    </div>
                    <div class="account-box-content mt-4">
                        
                        <h4>Register</h4>
                         <form method="post" class="form-group ">
                            <div class="row pt-2">
                                <div style="display:inline">
                                    <label>Name </label>
                                    <input type="text" class="col-md-4" id="FirstName">
                                </div>
                                <div style="display:inline">
                                    <label>Lastname </label>
                                    <input type="text" class="col-md-4" id="LastName">
                                </div>
                            </div>


                            <div class="row pt-2">
                                <div>
                                    <label>Email  </label>
                                    <input type="email" class="col-md-8" id="Email" />
                                </div>
                            </div>

                            <div class="row pt-2">
                                <div>
                                    <label>Mobile  </label>
                                    <input type="text" class="col-md-8" id="Mobile">
                                </div>
                            </div>                                
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

and here is the css code

 .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 20px;
        display: inline;
        border: 2px solid black;
        width: 100%;
    }

 .page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}

however, the result looks like this https://i.sstatic.net/mRtRK.jpg

How can I achieve the desired outcome?

Answer №1

utilize bootstrap classes and eliminate display:inline;

col should be a direct descendant of row class

html

<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-md-9 mx-auto">
        <div class="account-box">
          <div class="account-box-content mt-4">
            <h4>Register</h4>
            <form method="post" class="form-group ">
              <div class="row pt-2 ">
                <div class="col-6">
                  <div class="row">
                    <div class="col-8">
                      <input type="text" id="FirstName">
                    </div>
                    <label class="col-4">Name </label>
                  </div>
                </div>
                <div class="col-6">
                  <div class="row">
                    <div class="col-8">
                      <input type="text" id="LastName">
                    </div>
                    <label class="col-4">Lastname </label>
                  </div>
                </div>
              </div>
              <div class="row pt-2">
                <div class="col-10">
                  <input type="email" class="w-100" id="Email" />
                </div>
                <label class="col-2">Email </label>
              </div>

              <div class="row pt-2">
                <div class="col-10">
                  <input type="text" class="w-100" id="Mobile">
                </div>
                <label class="col-2">Mobile </label>
              </div>
            </form>
          </div>
          <div class="picture_account">
            <img src="~/images/d2.jpg" class="imgFormat " />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css

     .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 20px;
/*         display: inline; */
        border: 2px solid black;
        width: 100%;
    }

 .page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}
.account-box-content form label{
  text-align: right;
}

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

When attempting to select a HTML element within a <ng-template> tag using d3.select(), it will return null

I have a situation where I have an element < svg > inside an < ng-template > <div *ngIf="data == undefined; else elseBlock"> Sorry no data! </div> <ng-template #elseBlock> <svg id="areachart" width="100%" height="210 ...

Can IE Conditional Comments have a negative impact on page speed?

Debates between "CSS hacks" and "Conditional Comments" have become a regular occurrence for me lately, so I wanted to hear the thoughts of the Stack Overflow community on this topic. <!--[if IE]> <link type="text/css" rel="stylesheet" href="ie-s ...

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

Attempting to establish a means to switch between languages

Currently, I am in the process of implementing a language switch feature for a website project that I am currently working on. This feature will allow users to seamlessly switch between English, Latvian, and Norwegian languages. To achieve this functionali ...

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

The pattern() and onkeyup() functions are unable to function simultaneously

When trying to display a certain password pattern using regex while typing in the fields, I encountered a problem. The onkeyup() function works for checking if both passwords match, but it causes the pattern info box not to appear anymore. I'm curiou ...

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

Tips for maintaining a highlighted navigation link upon selection in Vue.js

My dilemma involves a navigation bar featuring router-links. My goal is to have the selected link visually highlighted so users can easily identify which page they are on. The current setup looks something like this: <div class="mynav"> ...

Automate the process of opening an ngbpopover from an Angular 2 component using programming techniques

Currently, I am referring to this specific article in order to integrate Bootstrap with Angular 2. While the instructions in the article are helpful, there seems to be a lack of information on how to pass the popover reference to a component method. The on ...

Issue with bootstrap: the ID is not activating even when it is visible

I am a beginner with bootstrap and I encountered an issue. I created a simple page using bootstrap 5 and included 4 buttons: "Home," "Explore," "Create," and "Share." Here is the code for reference: https://github.com/nguyencuc2586/project2 In the code s ...

Extracting Data From HTML Document Specifically Targeting Table

How can I scrape the data from the table located on the far right of this page , considering that all tables on the page use the same styles and class names? I need to extract information from that specific table and display it. Any suggestions? ...

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

How can I make this div appear on the screen?

I have recently encountered an issue with a navbar on my webpage. Despite adding all the necessary links, one of them mysteriously disappears from view. It seems to be present when inspected in the console, but it just won't display on the front end. ...

Attaching onchange event to a select menu

I'm a bit confused about how to bind the onchange event to a select element. There seem to be multiple ways to accomplish this. HTML <select id="ddl" onchange="test()"></select> jQuery $(function(){ $("#ddl").change(function(){ ...

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

"do not make use of inline labels in bootstrap version 4

I'm working on displaying a bootstrap 4 label for a dropdown hyperlink next to some text. Here is the HTML code I have: <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="http://exampl ...