Seeking assistance with aligning CSS inline elements in Servicenow platform

As a beginner in front-end development, I have created a simple form with 4 fields. My question is how to align all these fields in one line equally divided?

Below is the code snippet written in HTML along with the output:

<div>
 <form>
  <div class="form-inline">
    <div class="col-sm-6">
         <label>Name:   </label>
      <input type="text" class="form-control" >
   </div>
    <div class="col-sm-6">
      <label>Email:   </label>
      <input type="text" class="form-control" >
    </div>
    <br>
    <br>
    <div class="col-sm-6">
      <label>Phone #:   </label>
      <input type="text" class="form-control" >
    </div>
    <div class="col-sm-6">
      <label>Education Qualification:   </label>
      <input type="text" class="form-control" >
    </div>
  </div>
</form>
</div>

View the output of the above code here

Answer №1

If you want to achieve a similar result, consider the following approach:

Click here to see an example

.customClass {
  width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <form>
    <div class="form-inline d-flex">
      <div class="col-sm-6 d-flex">
        <label class="customClass">Label Text:</label>
        <input type="text" class="form-control">
      </div>
      <div class="col-sm-6 d-flex">
        <label class="customClass">Another Label:</label>
        <input type="text" class="form-control">
      </div>
      <br>
      <br>
      <div class="col-sm-6 d-flex">
        <label class="customClass">Additional Label:</label>
        <input type="text" class="form-control">
      </div>
      <div class="col-sm-6 d-flex">
        <label class="customClass">More Label Text:</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </form>
</div>

Answer №2

When it comes to aligning elements, there are numerous techniques available. Bootstrap offers predefined classes specifically designed for element alignment, making it easier for you to achieve the desired layout. For aligning elements within a form, Bootstrap provides Form-group and form control classes that can address all your alignment needs. For more information on how to utilize these classes effectively, please refer to the following link: https://getbootstrap.com/docs/4.3/components/forms/

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

Applying and deleting CSS classes to the nth ancestor element

Is there a way to dynamically add and remove CSS classes to the parent of a specific element on a web page using a link button? Here is the code snippet: <div class="prod-box shadow"> <div class="prod-details"> < ...

How can you make a Unity Web GL html container adjust its width to match the size of the browser window?

Looking to create a Unity WebGL build that allows for specifying width and height in the HTML template. How can I dynamically set the width of div id="gameContainer" based on the browser window width to ensure it always fills the space? .webgl-content ...

Execute the function once the audio has finished loading

I need help running a function once an audio file has finished downloading. This is my JavaScript code: // https://freesound.org/people/jefftbyrd/sounds/486445/ var audioFile = "https://raw.githubusercontent.com/hitoribot/my-room/master/audio/test/test.m ...

Encountering the error message "Undefined variable '$'" in a script that is loaded after jQuery

My code is simple - it loads jQuery first, followed by a script that uses the $ syntax. However, I keep encountering the error: ReferenceError: $ is not defined Initially, I suspected that the async attribute on the script tag was the issue, but changi ...

What is the best way to comprehend IE comments in a given condition?

I recently came across some conditional comments in a theme I'm working on that dynamically add classes to the html tag depending on the version of Internet Explorer being used. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" ...

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

"Create a pop-up notification using Bootstrap without the need for

This seems like a straightforward issue, yet surprisingly, I have been unable to find any solutions. My objective is to create an alert in the browser that is very similar to alert('please try again'); I attempted to achieve this using bootst ...

Using HTML5 input pattern to permit the use of a comma separator when entering thousands

I'm currently working on creating a regular expression for an HTML5 input form that allows the comma as a separator for thousands. Here are some examples of valid input: 20 3000 4,000 600000 7,000,000 8000000 The requirements for the input are: o ...

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

Personalizing the Styles of Bootstrap 4

Hello there! I found this helpful resource: Documentation I'm interested in: Customizing Bootstrap 4 by utilizing our pre-existing custom variables file and easily adjusting global CSS preferences with new $enable-* Sass variables. You can override a ...

When submitting the form, a new browser tab opens displaying a blank PHP script

Currently revamping my website using a template and editing the content with notepad++. Struggling to display a success message on the contact me page after form submission. The issue arises when I submit information in the text boxes and click submit, it ...

I've created a logo, but why are there two logos on my website?

There seems to be an issue with two divs stacking on top of each other, which is not the desired layout. This problem occurs when five div boxes are added. The goal is to have all divs in a single row, but it's unclear why this layout is not working ...

Make the background image within a button stretch to completely cover the button

I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space i ...

Bootstrap's anchored footer fix

Exploring Bootstrap and I'm curious about how to keep the footer fixed at the bottom of the page without it disappearing when scrolling through the content. Any suggestions? ...

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

What is causing the issue of buttons within certain div tags not functioning properly when sharing the same classes?

There seems to be an issue with buttons not functioning properly when they are placed inside specific HTML tags. They become unclickable, even in cases where: a. the classes assigned to them are identical to those of working buttons, and b. the enclosing ...

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...