Creating an elegantly designed and mobile-friendly form using Bootstrap

As someone relatively new to CSS, I am seeking guidance in creating a form with ASP.Net MVC using Razor that can adapt to different screen sizes. Previously, I built a form using tables, tr, td, p, and br tags with fixed widths, resulting in the desired layout on screens of a specific size. However, on smaller screens, such as those less than 1024x768 pixels, the layout is distorted, requiring excessive scrolling both vertically and horizontally.

My goal is to replicate this design on larger screens while maintaining responsiveness for tablets and phones. I am currently using ASP.net with MVC 5 and Bootstrap CSS, but I am struggling to achieve the desired label-on-top, control-below layout.

Therefore, my inquiry is: Does anyone have a basic HTML structure for this layout using Bootstrap CSS? Additionally, can anyone recommend a reliable tutorial for mastering Bootstrap and CSS in general? There are many resources available, but I am interested in quality recommendations.

Thank you,

htmlcssasp.net-mvctwitter-bootstrap

Answer №1

Bootstrap classes are a fantastic choice for web development. The documentation provided is top-notch and makes it easy to grasp. Using Bootstrap 4 classes is incredibly straightforward, as demonstrated in the example below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>

<div class="d-flex flex-column">
<div class="w-50 d-flex flex-column pb-1">
<label class="font-italic" for="reference">Reference</label>
<span class="text-black-50">Your contract number or last name</span>
<input class="" id="reference" type="text" />
</div>
<div class="w-50 d-flex flex-column pb-1">
<label class="font-italic" for="enterprise">Enterprise *</label>
<input class="" id="enterprise" type="text" />
</div>
<div class="d-flex flex-row pb-1">
<div class="w-50 d-flex flex-column">
<label class="font-italic" for="address1">Address *</label>
<input class="" id="address1" type="text" />
</div>
<div class="w-50 w-50 d-flex flex-column">
<label class="font-italic" for="address2">Address</label>
<input class="" id="address2" type="text" />
</div>
</div>
</div>

The utilization of these classes will significantly reduce your code length. The d-flex class creates a flex-box layout, while pb-1 adds padding at the bottom with a size of 1 rem. w-50 sets the width to 50%. Remember that flex-row arranges child elements into columns, whereas flex-column organizes them into rows.

Have fun implementing Bootstrap – it's truly remarkable!

Answer №2

In addition, Bootstrap offers the option to utilize the grid system, which relies on the use of row and col-* classes. Take a look at the following example:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row">
    <div class="col-6">
      <label class="font-italic" for="reference">
        Reference
        <br>
        <small class="text-muted">Your contract number or last name</small>
      </label>          
      <input class="form-control" id="reference" type="text"/>
    </div>
  </div>
  
  <div class="row">  
    <div class="col-6">
      <label class="font-italic" for="enterprise">Enterprise *</label>
      <input class="form-control" id="enterprise" type="text"/>
    </div>
  </div>

  <div class="row">        
    <div class="col-6">
      <label class="font-italic" for="address1">Address *</label>
      <input class="form-control" id="address1" type="text" />
    </div>        
    <div class="col-6">
      <label class="font-italic" for="address2">Address</label>
      <input class="form-control" id="address2" type="text" />
    </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

Encountering an error while trying to call a function from the datepicker.js

I encountered an issue while trying to call a function from app.js in the datepicker.js file when a button is clicked. The error message "Uncaught Reference: submitDetails is not defined" is displayed. This error indicates that the function submitDetail ...

javascriptangularjshtmlcssdaterangepicker

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

The functionality of Bootstrap icons is not functioning properly

After downloading a customized version of Bootstrap with only the icons, I encountered issues trying to incorporate them into my site. Despite copying and pasting the icon styling into my existing bootstrap.css file, the icons were still not displaying pro ...

cssruby-on-railstwitter-bootstrap

Tips for creating an adjustable background image size

Is it possible to adjust the height of a section to match the background using CSS? Currently, the height is determined by the content within the section. CSS: .content-block { background-size: cover; background-position: center center; } HTML: &l ...

csshtml

changing tooltip color in bootstrap based on the parent element

Is there a way to adjust the bootstrap tooltip background-color based on the container? For example, my header has a white background and my footer is black. #header .tooltip-inner{ background-color:fade(@grayWhite,80); } #footer .tooltip-inner{ backgro ...

csstwittertooltip

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...

htmlcss

The PrimeNG confirmation dialog (Overlay) does not come with any default styling (CSS)

I implemented a PrimeNG confirmation dialog based on the example from their official documentation: component.html <p-confirmDialog appendTo="body" #cd> <p-footer> <button type="button" pButton class="btn btn-primary btn-norma ...

cssangularprimeng

Printing content from an Angular dashboard can be achieved by following a few

Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...

htmlangularangularjssassangular-material

Retrieve the most recent 5 entries from a database using PHP and display them in an ordered list on an HTML page

Currently, I am in the process of learning how to populate an ordered list within an HTML page with the 5 most recent records from a table using PHP. While I have managed to grasp most components (with some difficulties in PHP), my main challenge lies in e ...

phphtmlmysqli

form to submit files

My web application has a simple file upload requirement of maximum 1 mb. It is an externally-facing website that needs to be compatible with all browsers and versions as much as possible. We are using C# .net 3.5 ASP .Net (IIS 7) technology. However, we ...

htmlfileuploadcross-browser

Ways to track activities involving a specific input element

Currently, I'm dealing with an input field within an ASPX page utilizing minified JavaScript. Unfortunately, I do not have access to the C# source code for this particular page as it is not publicly available. However, I can still make changes to the ...

javascriptc#html.netjson

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

javascripthtmlcss

Tips for reducing the border size to properly accommodate a div

I am wondering how to adjust the border size to fit the div containing a h5, hr, and two p elements? <div style="border: black 0.5px solid; align-self: start;"> <h5 style="margin-left: 450px; margin-top: 200px;">xxxx</h5> <hr w ...

html

The Fab Button from Material UI remains beneath the left split-pane

Is there a way to ensure the Fab button is completely visible? The left side often gets hidden under the left pane. I attempted to increase the z-index, but it did not have any effect. View on CodeSandbox <UpperPane> <Fab ...

cssmaterial-uisplitpane

Unable to execute multiple backstretch instances

I am having trouble adding two different backgrounds to two different divs or on the body and a div simultaneously. Only one of the two backgrounds is displayed. For example, on this page: The background shows up, but not the #sliders div. P.S. The Java ...

jquerycss

How to position a div in the center of a full-width and full-height background div

I'm experiencing an unusual issue. Despite my efforts to center the small red box (#sphere-content) inside the gray box (#background), none of the typical solutions seem to be working. I've spent a considerable amount of time researching "centeri ...

htmlcsscentering

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

javascriptcssreactjsthree.js

Can you explain the significance of the 9 in this width attribute declaration?

Can someone explain the purpose of this code snippet? My assumption is that it could be a browser hack, but I haven't been able to decipher its exact function. width: 500px\9; Is there any specific reason for using \9 in this context? ...

csswidth

Prevent users from inserting images from their desktop into the HTML by disabling

While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...

javascripthtmldrag-and-drop

Unchecked checkbox displays as checked in UI

I am facing an issue with checking checkboxes using JavaScript. Even though the checkbox appears to be checked in the program, it does not reflect the updates on the user interface. If anyone has a solution for this, please share. <!DOCTYPE html> ...

javascriptjqueryhtmlcheckbox