inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle:

<div class="m-portlet__body">
  <div class="form-group m-form__group row">
    <label class="col-lg-2 col-form-label">
                Email Address
              </label>
    <div class="col-lg-3">
      <input type="text" name="name" class="form-control m-input" [(ngModel)]="model.name" #name="ngModel" placeholder="Enter full name">
    </div>
    <label class="col-lg-2 col-form-label">
                First Name
              </label>
    <div class="col-lg-3">
      <input type="text" name="firstName" class="form-control m-input" [(ngModel)]="model.firstName" #firstName="ngModel" placeholder="Enter first name">
    </div>
    <label class="col-lg-2 col-form-label">
                Last Name
              </label>
    <div class="col-lg-3">
      <input type="text" name="lastName" class="form-control m-input" [(ngModel)]="model.lastName" #lastName="ngModel" placeholder="Enter last name">
    </div>
    <label class="col-lg-2 col-form-label">
                Profile
              </label>
    <div class="col-lg-3">
      <input type="text" name="profile" class="form-control m-input" [(ngModel)]="model.profile" #profile="ngModel" placeholder="Enter profile">
    </div>
  </div>
</div>

I am aiming for a design similar to this one: https://i.sstatic.net/26Kpz.png

However, it seems like my row group is not responsive as shown in the fiddle here: https://i.sstatic.net/cSEw5.png

Can anyone point out what I might be doing wrong? Thank you!

cssbootstrap-4

Answer №1

If you want this to work properly, make sure the label is placed in the same div as the input.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="m-portlet__body">
  <div class="form-group m-form__group row">
    <div class="col-lg-3">
      <label>Correo electrónico</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    
    <div class="col-lg-3">
      <label>Nombre</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>

    <div class="col-lg-3">
      <label>Apellido</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
    
    <div class="col-lg-3">
      <label>Perfil</label>
      <input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
    </div>
  </div>
</div>

UPDATE: To view the layout correctly, run the snippet in full screen mode. On smaller screens, everything will be displayed in a single column. The design should resemble the one in your photo and meet your requirements.

Answer №2

Kindly have a look here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-portlet__body">
        <div class="form-group m-form__group row">
            <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-label">
                    Email Address
                </label>

                <input type="text" name="name" class="form-control m-input" [(ngModel)]="model.name" #name="ngModel" placeholder="Enter full name">

            </div>
            <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-label">
                    First Name
                </label>

                <input type="text" name="first_name" class="form-control m-input" [(ngModel)]="model.first_name" #first_name="ngModel" placeholder="Enter first name">
            </div>
            <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-label">
                    Last Name
                </label>

                <input type="text" name="last_name" class="form-control m-input" [(ngModel)]="model.last_name" #last_name="ngModel" placeholder="Enter last name">
            </div>
            <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <label class="col-form-label">
                    Profile
                </label>

                <input type="text" name="profile" class="form-control m-input" [(ngModel)]="model.profile" #profile="ngModel" placeholder="Enter profile">
            </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

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

javascripthtmljquerycssowl-carousel-2

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen

Create two grid components for Material-UI and use Flexbox to ensure that both items have equal height

I'm currently working on ensuring that two grid items have the same height using flex in Material UI, but I've hit a roadblock. It seems like my approach with the Grid element might be incorrect. I've experimented with adjusting the height a ...

htmlcssreactjsreduxmaterial-ui

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

htmlcss

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Ways to center elements horizontally without relying on Flexbox layout?

Is there a way to arrange the web elements side by side without relying on Flexbox? Although an effective tool, Flexbox does not function properly with IE 9 or 10. I am aiming for the text inside the link to be displayed immediately next to the images. The ...

htmlcsscross-browserinternet-explorer-9internet-explorer-10

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

javajavascriptcssmavenjakarta-ee

What is the best way to adjust the position of a dropdown menu in Material UI?

I am currently working on a Gatsby application and I'm trying to achieve a dropdown menu effect when the Menu icon is clicked, with the menu appearing right under the header and expanding to 100% width. Below is the code snippet that I have been using ...

cssreactjsdrop-down-menumaterial-uigatsby

Troubleshooting Bootstrap 4 Content Alignment Issue: Centering Horizontally and Vertically

Having trouble centering my content both vertically and horizontally within the body of the webpage using Bootstrap 4. Despite trying various solutions from the documentation and StackOverflow, I can't seem to get it to work. Would greatly appreciate ...

htmlcssbootstrap-4

When the webpage is launched, the font styles specified in the CSS do not take effect and

As a beginning coder, I have encountered a small issue. In my HTML document, I attempted to set the font types of my paragraphs and headings to Arial using CSS. The code snippet is as follows: h4{ font-family arial san-serif; } However, when I run the c ...

css

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

Implementing Bootstrap in Wordpress using functions.php

The code snippet below is stored in my functions.php file within a Child theme directory. <?php function theme_styles() { wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' ); wp_enqueue_ ...

phpjquerycsswordpresstwitter-bootstrap

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

htmlcssborderborder-radius

Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...

javascripthtmlcss

Problem with keyframe animations in Internet Explorer 10

My CSS animation works flawlessly in all modern browsers, except for IE10 which is causing some trouble. It appears that IE is having difficulty properly rotating 360deg. I am still searching for a workaround that won't compromise the functionality in ...

internet-explorercssanimationkeyframe

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

htmlcssbootstrap-modalbootstrap-4

What could be causing my popup window to not display on top of all other HTML elements?

.box { width: 40%; margin: 0 auto; padding: 35px; border-radius: 20px/50px; background-clip: padding-box; text-align: center; display: inline-block; } .button { font-size: 1em; padding: 10px; color: #222; border: 2px solid #06D85F; ...

htmlcss

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

javascriptjqueryhtmlcsstwitter-bootstrap