What are the steps to achieve form styling using Bootstrap?

I am trying to achieve a specific style using the Bootstrap framework. I have been able to achieve something similar to what I want, but the issue is that the save button is not aligned to the right and is not taking up the available width. There is a gap between the save button and the red border wrapper. Is there a way to make the button take up the available width? Can this be achieved using an inline form or something similar? Please help.

https://i.sstatic.net/wR8ci.jpg

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
  <div class="row mt-4">
    <div class="col-5">
      <div class="form-group row">
        <label for="sel-city" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-city" name="city"></select>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="form-group row">
        <label for="sel-zone" class="col-form-label col-md-2">Label</label>
        <div class="col-md-7">
          <select class="form-control custom-select" id="sel-zone" name="workzone"></select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-5">
      <div class="form-group row">
        <label for="sel-stage" class="col-form-label col-md-2">label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-stage" name="stage">
          </select>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="form-group row">
        <label for="sel-status" class="col-form-label col-md-2">Label</label>
        <div class="col-md-7">
          <select class="form-control custom-select" id="sel-status" name="status"></select>
        </div>
        <button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
      </div>
    </div>
  </div>
</div>

Answer №1

I have made some adjustments to your HTML structure to ensure it flows smoothly (see example)

Here are some key points directly relevant to your query:

For the button (classes) btn-block: This class will make the button expand to fill the entire width of the container div.

For the column (classes): align-self-end: This class will position the item at the bottom right of the div; you may need to add mb-3 for bottom margin to align it with your other element.

noPadding: This is a custom CSS class. By default, columns have padding on their left and right sides. If you want to remove this padding, you will need to use a custom CSS class like noPadding.

.noPadding {
 padding-right: 0px !important;
 padding-left: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
  <div class="row mt-4">
    <div class="col-5">
      <div class="form-group">
        <label for="sel-city" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-city" name="city"></select>
        </div>
      </div>
      <div class="form-group">
        <label for="sel-zone" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-zone" name="workzone"></select>
        </div>
      </div>
    </div>
    <div class="col-5">
      <div class="form-group">
        <label for="sel-stage" class="col-form-label col-md-2">label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-stage" name="stage">
          </select>
        </div>
      </div>
      <div class="form-group">
          <label for="sel-status" class="col-form-label col-md-2">Label</label>
          <div class="col-md-10">
            <select class="form-control custom-select" id="sel-status" name="status"></select>
          </div>
        </div>
    </div>
    <div class="col align-self-end mb-3 noPadding">
            <button id="btn-status-save" class="btn btn-primary btn-block"  onclick="saveStatus()">Save</button>
    </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

What is the best way to progressively load sections of an HTML table?

I'm facing an issue with a table that is rebuilt asynchronously every time a new option is chosen from a dropdown. The HTML generation works fine, but sending it back across the wire breaks when the size is too large. One idea I had was to query sect ...

What is the best way to conceal the URL of a link leading to a file?

My website is built with C#, Kendo MVC, Razor and features a Kendo grid where one of the cells contains a hyperlink to a PDF file. The issue I'm facing is that when users click on the link, the URL is visible in the browser and can be altered to acces ...

How I made my WordPress columns automatically resize with the help of Bootstrap

Currently, my Wordpress template utilizes Bootstrap 2.3.1 with two areas set up using SPAN4 and SPAN8. The resolution is fixed at 1170px, so there's no need to configure the lg component of Bootstrap. I'm looking for assistance in properly confi ...

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

Press on a rectangle inside an HTML5 SVG program

I'm currently developing a web application that utilizes the svg and Raphael library: workflowEditor.show(); var myList = document.getElementsByTagName("rect"); for (var a = 0; a < myList.length; a++) { myList[a].addEventListener("OnClick", f ...

Converting Data from MySQL and PHP to Excel

Is there a way to export human resource applications stored in my MySQL table as an Excel file? function exportExcel($filename='ExportExcel',$columns=array(),$data=array(),$replaceDotCol=array()){ global $connect; header('Content-Enc ...

Navigating tables with Selenium WebDriver

I am struggling to locate and interact with a specific element in a table using Selenium WebDriver. The issue is that the table IDs are constantly changing, making it difficult for me to click on the desired element. For instance, consider the following t ...

Obtaining Beverage Overall with Loop

I am currently using a function to calculate the total of each drink, with a total of 5 drinks: var totalEstimate = 0; var locoCost = 0; var blackCost = 0; function calcLoco() { totalEstimate -= locoCost; locoCost = docume ...

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

The animation-play-state is set to 'running', however, it refuses to start playing

I'm in the process of creating a landing page that includes CSS animations, such as fade-ins. Initially setting animation-play-state: "paused" in the CSS file, I later use jQuery to trigger the animation while scrolling through the page. While this s ...

How to retrieve the image source from a block using jQuery

Currently, I am working on developing a slider for my webpage using jquery's "Cycle" plugin. However, I have encountered an issue with accessing the image sources used in the slider. To provide more context, here is a snippet of code from the 'he ...

Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. M ...

Tips for choosing a sibling element on hover using CSS

I'm having trouble figuring out how to make the rect element change color to purple when the text is highlighted. Right now, only the text color is changing. Is there a way to achieve this using just CSS? The goal is for the rect to turn purple on ho ...

Real-time console input/output feature for a gaming server utilizing either JavaScript or PHP

About My Minecraft Server: After running a Minecraft server in my basement for a few months, I realized that using TeamViewer to input commands and monitor the console was not ideal. The console of a Minecraft server provides a log of events with timestamp ...

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language. index.html <!DOCTYPE html> <html lang="en"> <h ...

Revamped Web Presentation: The Dynamic Blend

I'm struggling to arrange a section in the same way as shown in this image. https://i.stack.imgur.com/QVDHn.png I have been using bootstrap 4 and have experimented with rows and columns, but haven't been able to achieve the desired layout. Curr ...