What are the steps to create a login form that is responsive by utilizing the Bootstrap grid system

.custom-border {
  border: 2px groove #000 !important;
  padding: 0px 5.4em 1.4em 6.4em !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.custom-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
  color: black;
}
<fieldset class="custom-border">
  <legend class="custom-legend">my legend</legend>
  <form>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</fieldset>

Code:- http://jsfiddle.net/Dhanunjay/6r3wos04/10/

I need help in adjusting the code above. It is currently taking up the entire screen, but I want it to be centered with equal space on all four sides.

Even after removing some CSS properties like padding, width, and margin from the classes, the issue persists. Any suggestions for making this design responsive using col-sm, lg, xs classes?

htmlcssbootstrap-4bootstrap-vue

Answer №1

Do you find this outcome satisfactory? I have implemented Bootstrap 4:

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070041e061e01">[email protected]</a>/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

If you also require it to be vertically centered:

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077369716976">[email protected]</a>/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Answer №2

Is it possible to create a login form in the center of a webpage with equal spacing on all four sides? Also, how can I center the login button as well?

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434405a425a45">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">my legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Were you able to find the solution you were looking for? Feel free to ask any further questions in the comments section.

Answer №3

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}



.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}
 fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}
.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67667d7a7d7b6878493d273f2738">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">My custom legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="Custom Element" v-model="UserInput" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="Custom Element 2" v-model="passKey" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="REGISTER" class="bt btn" v-on:click="register()">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Answer №4

This sample template can be utilized to construct your own form. Make sure to place an input tag inside each column for proper functionality.

Answer №5

The container class is unique to Bootstrap and should not be directly styled. It's recommended to create a separate class for your customization instead. Additionally, setting it to a fixed width may limit responsiveness. For restricting the maximum width, consider using the max-width property.

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

Increase the margin for the following item if it has a specific class using CSS

Here is the HTML code that I currently have: <div class="post"> <h2 class="title">TITLE: Kausalya</h2> <p class="content">CONTENT: Shaunaka Shakha</p> </div> <div class="post"> <h2 class="title"> ...

htmlcss

Grabbing the mouse in Firefox

Are there any alternatives to the .setCapture(); and .releaseCapture() functions in Firefox that do not involve using jQuery? (The client prefers not to use it) ...

javascripthtml

I believe I am attempting to add some space to a row using CSS, or at least that's what I think I'm trying to achieve

Hey there, I need some help with adding an icon "services" section to my website. CSS is not my strongest suit, so I'm reaching out for assistance. My goal is to create blocks for the icons that don't touch the edge of the page and have a margin ...

htmlcss

Clicking randomly on the page to conduct test trials

Currently, I am seeking a way to ensure that my web page is flawless, specifically in terms of broken paths. Given that my website will utilize a touch screen interface, it is crucial to test the entire page thoroughly. While I have limited experience in a ...

javascripthtmltestingangularjstouchscreen

The issue of nested tabs in Bootstrap 3 causing problems with sliders within the main tab has

Hello, I am utilizing Bootstrap 3 tabs. Within the nav-tabs, there are three tab-panes: the first tab contains text only, the second tab includes a slider, and the third tab has nested tabs. However, I encountered an issue where the slider in the nested t ...

javascriptjqueryhtmltwitter-bootstrap

What is the purpose of activating hover styles when tapping on mobile devices?

On my button, you can see the color change when hovering: button { background-color: orange; } button:hover { background-color: darkorange; } Check out this example: https://jsfiddle.net/oepb5ks4/ While this works well on desktop, it's a diffe ...

htmlcss

A guide on changing the style of a Layout component in React

Currently, I am utilizing Next.js alongside Material-UI as the framework of choice. Within my project, there is a Layout component that encapsulates the content with Material-UI's <Container>. I desire to customize the style of the Layout compon ...

cssreactjsmaterial-uinext.js

The background image stubbornly refuses to stretch to the full width of the section container

Looking at my code example and the screenshot provided, it's clear that the image is not fitting into the container even when set to 100% width or utilizing other properties. Below you will see the code snippet: .about-us{ background-image: url(i ...

htmlcss

The tag's onclick function that was dynamically created was not triggering in jQuery

I created a web application using jquery mobile and ran into an issue. I am trying to call a function by clicking on a dynamically generated anchor tag, but it's not working and showing an error that the function is not defined. Any assistance on this ...

javascripthtmljqueryjquery-mobile

Performing a series of SQL queries in order to fill out the contents of

I am currently working on populating a summary table from a MySQL database, which consists of multiple rows and cells. Here is the image of my table: https://i.sstatic.net/8anPa.jpg I initially thought about writing individual SQL queries for each cell, b ...

phphtmlmysqlhtml-table

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

Step-by-step guide on showcasing an image within the sidebar-wrapper CSS class

I am trying to include an image in the #sidebar-wrapper class using the code below: CSS: #sidebar-wrapper { background-image:url('/images/nav.jpg'); margin-left: -250px; left: 250px; width: 250px; position: fixed; height: 100%; ov ...

htmlcss

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

cssangularangular-material

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

What is the best way to include a span within a select option element to display a flag beside each option?

I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...

htmlcss

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

The div element moves to the right as soon as the drop-down menu pops up

Currently, I am facing an issue with aligning an image inside a div that is centered in an outer-wrapper. The outer-wrapper contains a horizontal menu at the top with 5 sub divs displayed inline. I have implemented CSS for a drop-down menu that appears whe ...

htmlcssoverlapping

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...

htmlcssdatetimepicker

Enhance user experience with real-time form validation in Bootstrap 4 as the user inputs

In order to troubleshoot my issue, I created a simple index.php file with 2 input fields and a button that redirects to page2.php. These input tags have a regex pattern for Bootstrap-4 form validation. Issue 1: The validation only occurs after clicking ...

javascriptvalidationbootstrap-4addeventlistener

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

javascripthtmlvue.js