Customizing Forms with Bootstrap Styling in HTML

Question

Customizing Forms with Bootstrap Styling in HTML

Is there a way to rearrange this list so that the buttons appear above the textboxes, like in the

The code is as follows:

 <form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark">
     <div class="form-group col">
        <label for="Countries" class="control-label">Email address</label>
            <asp:DropDownList name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
            <asp:ListItem Text="<Select country>" Value="0" />
            </asp:DropDownList>
     </div>
     <div class="form-group col">
        <label for="DateIn" class="control-label">Pick-up date</label>
            <asp:Textbox runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Select Return Date">
            </asp:Textbox>
     </div>

     <div class="form-group col">
        <label for="DateOut" class="control-label">Drop-off date</label>
            <asp:Textbox runat="server" TextMode="Date" name="DateOut" ID="DateOut" Text="Select Pick-up Date">
            </asp:Textbox>
     </div>

     <div class="form-group col">
        <label for="smth" class="control-label">Email address</label>
            <asp:DropDownList name="smth" ID="smth" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
                <asp:ListItem Text="<Select country>" Value="0" />
            </asp:DropDownList>
     </div>

    </form>

At present, my page displays in this manner:

Current layout

html css asp.net bootstrap-4

Answer 1

Answer №1

Utilize two rows, one with two col-6 and one with two col-3. A single inline css style has been applied in this example, but it may not be necessary if the form is within another element of the same size. Adjust the width according to your design needs.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
    <form class="bg-success p-4 text-white mx-auto" style="width:500px">
      <div class="row">
        <div class="col-6 d-flex flex-column">
          <label for="DateIn">Return Date and Time</label>
          <input class="form-control" />
        </div>
        <div class="col-6 d-flex flex-column">
          <label for="Countries"> Categories:</label>
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-3">
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
        <div class="col-3">
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
      </div>
    </form>

Update

Follow these steps:

Make the form a row
Use col-6 for the first two columns
Apply col break to move the last two columns to a new line
Assign col-3 for the last two columns

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<form class="row bg-success p-4 text-white mx-auto" style="width: 500px;">
  <div class="col-6 d-flex flex-column">
    <label for="DateIn">Return Date and Time</label>
    <input class="form-control radius-0">
  </div>
  <div class="col-6 d-flex flex-column">
    <label for="Countries"> Categories:</label>
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block my-3"></div>
  <div class="col-3">
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
  <div class="col-3">
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
</form>

Check this CodePen

The form elements in this example have rounded corners compared to the image shown. If you are working with SCSS, adjust the radius accordingly. Otherwise, modify it using CSS.

Answer 2

Utilize two rows, one with two col-6 and one with two col-3. A single inline css style has been applied in this example, but it may not be necessary if the form is within another element of the same size. Adjust the width according to your design needs.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
    <form class="bg-success p-4 text-white mx-auto" style="width:500px">
      <div class="row">
        <div class="col-6 d-flex flex-column">
          <label for="DateIn">Return Date and Time</label>
          <input class="form-control" />
        </div>
        <div class="col-6 d-flex flex-column">
          <label for="Countries"> Categories:</label>
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-3">
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
        <div class="col-3">
          <select class="form-control">
            <option value="">one</option>
            <option value="">two</option>
            <option value="">three</option>
          </select>
        </div>
      </div>
    </form>

Update

Follow these steps:

Make the form a row
Use col-6 for the first two columns
Apply col break to move the last two columns to a new line
Assign col-3 for the last two columns

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<form class="row bg-success p-4 text-white mx-auto" style="width: 500px;">
  <div class="col-6 d-flex flex-column">
    <label for="DateIn">Return Date and Time</label>
    <input class="form-control radius-0">
  </div>
  <div class="col-6 d-flex flex-column">
    <label for="Countries"> Categories:</label>
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block my-3"></div>
  <div class="col-3">
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
  <div class="col-3">
    <select class="form-control radius-0">
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
  </div>
</form>

Check this CodePen

The form elements in this example have rounded corners compared to the image shown. If you are working with SCSS, adjust the radius accordingly. Otherwise, modify it using CSS.

Answer 3

Answer №2

To achieve the desired layout, you can utilize the display: flex property. Additionally, some adjustments will be necessary to ensure that the styling of the inputs align with your design.

I've created two utility classes named columns and col.

The columns class serves as a container div with display: flex applied. On the other hand, the col class represents each column within the container and has flex: 1 defined, ensuring equal spacing within the container.

form {
  width: 400px;
  background: #278339;
  color: #FFF;
  padding: 20px;
}

input,
select {
  width: 100%;
  margin-bottom: 10px;
}

.columns {
  display: flex;
}

.col {
  flex: 1;
  margin-right: 15px;
}

<form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark">

  <div class="columns">

    <div class="col">

      <div class="form-group col-xs-4 col-md-4">
        <label for="DateIn" class="control-label">Return Date and Time</label>
        <input runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Select Return Date">
        </input>
      </div>

      <div class="columns">

        <div class="col">
          <div class="form-group col-xs-4 col-md-4">
            <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
              <option Text="<Select country>" Value="0" />
            </select>
          </div>
        </div>

        <div class="col">

          <div class="form-group col-xs-4 col-md-4">
            <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
              <option Text="<Select country>" Value="0" />
            </select>
          </div>
        </div>
      </div>

    </div>


    <div class="col">
      <div class="form-group col-xs-4 col-md-4">
        <label for="Categories" class="control-label">Categories:</label>
        <select name="Categories" ID="Categories" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Categories_Selected">
          <option Text="<Select category>" Value="0" />
        </select>
      </div>
    </div>

  </div>


</form>

Answer 4

To achieve the desired layout, you can utilize the display: flex property. Additionally, some adjustments will be necessary to ensure that the styling of the inputs align with your design.

I've created two utility classes named columns and col.

The columns class serves as a container div with display: flex applied. On the other hand, the col class represents each column within the container and has flex: 1 defined, ensuring equal spacing within the container.

form {
  width: 400px;
  background: #278339;
  color: #FFF;
  padding: 20px;
}

input,
select {
  width: 100%;
  margin-bottom: 10px;
}

.columns {
  display: flex;
}

.col {
  flex: 1;
  margin-right: 15px;
}

<form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark">

  <div class="columns">

    <div class="col">

      <div class="form-group col-xs-4 col-md-4">
        <label for="DateIn" class="control-label">Return Date and Time</label>
        <input runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Select Return Date">
        </input>
      </div>

      <div class="columns">

        <div class="col">
          <div class="form-group col-xs-4 col-md-4">
            <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
              <option Text="<Select country>" Value="0" />
            </select>
          </div>
        </div>

        <div class="col">

          <div class="form-group col-xs-4 col-md-4">
            <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
              <option Text="<Select country>" Value="0" />
            </select>
          </div>
        </div>
      </div>

    </div>


    <div class="col">
      <div class="form-group col-xs-4 col-md-4">
        <label for="Categories" class="control-label">Categories:</label>
        <select name="Categories" ID="Categories" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Categories_Selected">
          <option Text="<Select category>" Value="0" />
        </select>
      </div>
    </div>

  </div>


</form>

Customizing Forms with Bootstrap Styling in HTML

Answer №1

Update

Check this CodePen

Answer №2

Similar questions

Adjust the transparency of the image when hovered over, but keep the text in the center

Populate List Items until Maximum Capacity is Reached and Increase the

Is it possible to utilize an integrated web browser (like Chrome) as the graphical user interface toolkit for Java desktop applications?

Conceal a row in a table after successfully executing a delete query using Ajax

Disabling the linkbutton within a grid view depending on the specific row value

Start the static class and ensure it runs continuously without restarting

Equal size images displayed within cards in Material UI

A secondary operation is triggered in the simulated keyboard when the enter or space key is pressed, even when it is not warranted

Error: You can't call .text as a function in jQuery

What are some techniques for applying CSS styling directly to a custom element?

Update the appearance of an element in real-time using VUEJS

Discovering the failing dependency that isn't loading

Obtain HTML element properties from a webpage using the Selenium tool in Python

I'm attempting to resize my images to fit within the container, but instead they appear enlarged

Discover the process of retrieving an element by its ID when dealing with dynamically generated IDs in AngularJS

Switching between two states of a single 'td' element within a column

Arrangement priority and fixed location

Tips for maintaining a consistent style across multiple websites

There are two design issues that need to be addressed: a white background glitch and a layout problem specifically in

Tips for using jQuery dropdown menus