Utilizing Bootstrap4 to achieve optimal layout of form components

In my current project, I am developing a form using Bootstrap4 with specific design requirements. Despite researching extensively on Bootstrap4 documentation and implementing various strategies like using tags, I have not achieved the desired outcome.

Below is the code snippet that I have been working on:

Mypage.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
   <form>
    <div class="form-group row">
      <label for="inputPhone" class="col-sm-2 col-form-label">Phone</label>
      <div class="col-sm-10">
        <input type="number" class="form-control box" id="inputPhone" placeholder="Phone Number">
      </div>
    </div>


    <div class="form-inline">
      <label class="mr-sm-2">Bio</label>
      <div class="circle">i</div>

      <label for="inputBio" class="mr-sm-2"></label>
      <div class="col">
        <textarea class="form-control bio-text" id="inputBio" rows="3" placeholder="Your Bio"></textarea>
      </div>
    </div>
   </form>
 </div>

CSS Code

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 28px }

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
       line-height: 20px; text-align: center; background: rgb(162, 197, 252); margin-left: 50px}

I have also provided a link to the live code demonstration on JSFiddle here: JSFiddle code for the form

Despite my efforts, the displayed output in my browser does not match the desired design. 🙏🏼 Any guidance or assistance from more experienced individuals would be immensely appreciated as I am relatively new to web development and still learning the ropes of Bootstrap4. Thank you!

htmlcssformsbootstrap-4

Answer №1

After making some slight adjustments to the layout, it appears that the output now matches your requirements perfectly. :)

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 85px;}

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
           line-height: 20px; text-align: center; background: rgb(162, 197, 252); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
<form>
        <div class="form-group row">
        <div class="col-sm-2 col-form-label">
        <label for="inputPhone" >Phone</label>
        </div>
          <div class="col-sm-1">
          
          </div>
          <div class="col-sm-9">
            <input type="number" class="form-control " id="inputPhone" placeholder="Phone Number">
          </div>
        </div>
        
        
        <div class="form-group row">
          <div class="col-sm-2">
          <label >Bio</label>
          
          </div>
          <div class="col-sm-1">
          <div class="circle">i</div>
          <label for="inputBio" ></label>
          </div>
          <div class="col-sm-9">
          
            <textarea class="form-control " id="inputBio" rows="3" placeholder="Your Bio"></textarea>
          </div>
        </div>
        </form>
        </div>

Answer №2

After reviewing your example in the fiddle, I have successfully aligned the form according to your specifications as demonstrated here: https://jsfiddle.net/x8wmhfL9/4/

The changes I implemented are as follows:

  • Initially, I removed margins that were causing alignment issues such as in the box class.
  • Instead of using mr-sm-, which I was unsure if it was a typo or an unknown class, I utilized col-sm- which should serve the same purpose.
  • I opted for form-group over form-inline because I found that by simply adding display: inline-block; to the circle class, I could align your info icon as intended.
  • I enclosed the Bio text and info icon within a class to better align them with the phone label width.
  • I adjusted col-sm-2 to col-sm-3 and col-sm-10 to col-sm-9 because this configuration worked better at the resolutions I was working on, although you may find that your original column sizes suit you best.

I trust these adjustments have been beneficial, and that my rationale for making these modifications is clear enough for your understanding.

.form-container {
  max-width: 449px
}

.bio-text {
  height: 91px;
}

input[type="number"] {
  border: 2px solid #b1b1b1;
  padding: .55rem .75rem
}

textarea {
  border: 2px solid #b1b1b1;
  padding: .55rem .75rem
}

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  line-height: 20px;
  text-align: center;
  background: rgb(162, 197, 252);
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
  <form>
    <div class="form-group row">
      <label for="inputPhone" class="col-sm-3 col-form-label">Phone</label>
      <div class="col-sm-9">
        <input type="number" class="form-control" id="inputPhone" placeholder="Phone Number">
      </div>
    </div>


    <div class="form-group row">
      <div class="col-sm-3">
        <label class="">Bio</label>
        <div class="circle">i</div>
      </div>


      <div class="col-sm-9">
        <textarea class="form-control bio-text" id="inputBio" rows="3" placeholder="Your Bio"></textarea>
      </div>

    </div>
  </form>
</div>

Answer №3

Check out the external link.

If you add 'col-sm-2' to the bio label, it should resolve the problem. Also, remember to eliminate any redundant label fields such as inputBio and classes like 'mr-sm-2' from both the label and textarea elements.

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

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

Bootstrap Validator for validating numerical ranges

How can I implement validation rules for a range of two numbers? I want to ensure that the maximum value of the first number is set to the value of the second number, and the minimum value of the second number is set to the value of the first number. Here ...

javascriptjavajqueryvalidationbootstrap-4

What methods are available for utilizing a runtime variable that TypeScript is unaware of?

I am looking to implement a global variable in TypeScript that will be defined dynamically at runtime. This global variable is necessary for transferring configuration properties from the server-side language to JavaScript. My approach involves using TypeS ...

htmltypescript

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices. This is the design I am aim ...

htmlcsstwitter-bootstrap-3

Hiding specific TD borders in a TABLE with CSS: A step-by-step guide

I am trying to create a table with some TDs without borders. This is what I have attempted so far: CSS .calendar-noBorder { border: none; background-color: red; } .calendar-table { border-collapse: collapse; } .calendar-table td { borde ...

htmlcsshtml-tableborderless

Optimizing Title Tags for Static Pages with Header Inclusion

Working on developing static web pages for a client who preferred not to use a content management system. These pages all have a shared header and footer php files. I am in need of creating unique title and meta description tags for each page, but I am un ...

phphtml

Employing Context Processors in Django for form handling

In order to display multiple forms throughout my project, I implemented a context processor as suggested. The context processor I created within my app looks like this: def forms_processor(request): name_form = NewNameForm() work_form = NewWorkFo ...

pythondjangoforms

IDE for remote content management in web development

Our current setup involves hosting an intranet on a server (consisting of just HTML and JavaScript projects). The contributors do not possess a local copy of the project, instead they regularly make modifications to the code using Expression Web. However, ...

htmlideintranet

Is there a way for me to insert a new column into a table using jinja?

As a beginner in the final project of CS50x, I am working on creating a webpage that allows users to input weights into a database table and then view those weights along with weight gain/loss information. I am using jinja and python to render a query resu ...

pythonhtmlsqljinja2cs50

What is the best way to display a Country's information from the dropdown menu in the Local Weather application?

I have been working on a Local Weather app that includes a dropdown menu where users can click on a location to view information such as City, Country, and temperature. However, I encountered an issue where the information does not appear consistently ever ...

javascriptjqueryhtmlcssdrop-down-menu

Converting Laravel variable into an image using JavaScript

I have a base64 string that I'm passing from the controller to the view. After verifying that the base64 string is correct online (by converting it to an image), I am attempting to call it in my JavaScript like so: <script> var crosshairImg ...

javascriptphpjqueryhtml

What is a method to prevent a div from being rendered in CSS, rather than simply hiding it from view

Although I am aware that the div can be hidden using CSS, its persistent existence is causing layout issues. Is there a way to completely eliminate any rendering of the div so that it ceases to exist? ...

htmlcssmaterial-ui

Transforming a React page into a JSON format and then having the ability to change that JSON back into a React page

Is there a way to easily transform a React page into JSON format so that after saving it, I can render the same page with all its details intact? import React from 'react'; import { useState } from 'react'; const Form = () => { ...

javascriptreactjsjsonformsweb

Ways to enhance the vertical size of an svg graphic using css

Currently, I am focusing on manipulating an svg image (as depicted in the screenshot with an arrow indicating four triangles) within the html code showcased below, pertaining to the webpage where I aim to increase its height. https://i.sstatic.net/Ycgp0.p ...

htmlcsssvgviewbox

Is there a way to implement field validation in a Vue wizard form?

Trying to implement form validation using Joi in a Vue wizard form, but not sure how to set it up correctly. The objective is to control the fields before progressing to the next and final page using the next() method. I want to keep the simplicity of th ...

javascriptformsvue.jsjoi

Locate an element by its neighboring label with XPath

Struggling to identify the XPATH for a specific element in a sea of similar attributes? Look no further. In this HTML snippet, the key to pinpointing the right element lies in its neighboring label, "Copyright". Here's the code: <div class="row"&g ...

htmlxmlxpath

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

How to transform HTML content into plain text format while retaining the HTML tags

transform this into something like this2 I'm attempting to convert text containing html tags (p, ol, b) into plain text format (similar to the outcome of running a code snippet) - I've experimented with the following code in .net core but it only ...

c#html.netasp.net-corehtml-parsing