Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png

Here's the code snippet for the form:

    <div class="col-lg-12 mb-4">
            <div class="form-row mt-4">
                <div class="col-sm-5 pb-3">
                    <label>County</label>
                    <asp:DropDownList ID="ddlCounty" runat="server"
                        DataSourceID="odsCounty" AppendDataBoundItems="true"
                        DataTextField="Title" DataValueField="Id" CssClass="form-control">
                        <asp:ListItem Value="">-- Select --</asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="odsCounty" runat="server"
                        TypeName="CAS.Business.ContractorBL"
                        DataObjectTypeName="CAS.Data.Models.TCAS_Contractor"
                        SelectMethod="GetContractors"></asp:ObjectDataSource>
                </div>

                <div class="col-sm-4 pb-3">
                    <label>Request Number</label>
                    <asp:TextBox ID="txtRequestNum" runat="server" EnableViewState="true" ViewStateMode="Enabled"
                        CssClass="form-control"></asp:TextBox>
                </div>

                <div class="col-sm-3 pb-3">
                    <label></label>
                    <div class="form-group">
                        <asp:LinkButton ID="lbtnFilter" runat="server" OnClick="lbtnFilter_Click"
                            CssClass="btn btn-primary"> 
                        <i class="fa fa-filter fa-fw" aria-hidden="true"></i>Filter
                        </asp:LinkButton>
                    </div>
                </div>
            </div>
    </div>

Need help resolving this alignment issue. Any suggestions?

Answer №1

If you're having trouble with the alignment of your button, there are a few things you can try, either on their own or in combination: 1. Attempt adding   to the empty label. 2. Experiment with removing the .form-group div container surrounding the button. 3. Create your own CSS class to serve as a wrapper div for the button to properly space it out. For example:

.spacer {
  margin-top: 10px; // adjust as needed
}

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

Creating elegant text in HTML using only CSSLearn how to design stylish text using CSS without any additional code

Can you generate stylish text using just CSS in HTML? Check out this link for a great demonstration of fancy text. ...

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

Vuetify - Best practices for vertically aligning rows in a v-treeview component

Just getting started with Vue js, so pardon me if this is a silly question. I've scoured the internet and can't seem to find a solution. I'm working on a v-treeview displaying a folder structure, with descriptions of each folder in a separa ...

What could be causing the event listener to not be triggered?

I'm having an issue with a simple code that is supposed to display an alert box when a hyperlink is clicked, but it's not working. I believe the script is not being called. Can someone help me figure out what's wrong? Here is the HTML code: ...

Retrieve the website address from a string of HTML code

I'm struggling to extract the URL from a given String that contains an HTTP response with an HREF tag. I've managed to identify the start of the links, but I need to stop the string as soon as the HREF tag ends. How can I accomplish this? public ...

With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element. <!doctype html> <html> <button id="button"> random number </button> ...

No content in Django's Bootstrap dropdown menu

I need assistance with extracting a list of objects and placing them in a dropdown menu. I have successfully achieved this, but the issue seems to be related to my HTML structure. Here is the code snippet from my HTML: <div class="dropdown"> < ...

Only add table heading if there is available space, but refrain from doing so if it will disrupt the layout

My current challenge involves a table where I have successfully used white-space nowrap to prevent the heading text from wrapping. The issue arises when viewing the layout on smaller screen widths, as this nowrap setting causes the table to expand beyond ...

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

The Angular multi select tree feature seems to be malfunctioning

I recently incorporated a plugin called angular-multi-select-tree from GitHub into my project. Here is how I added it: First, I installed it via bower using the command bower install angular-multi-select-tree --save. This updated the bower.json file to i ...

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

Here we have an HTML code snippet that includes an input file element with Angular: <input type="file" class="btn btn-info" id="archivoPDF" #PDFfile value="Seleccionar PDF(s)" accept="application/pdf" multiple /> And this is the TypeScript code sni ...

What is the best way to incorporate media queries in order to reduce the padding around my image?

Currently, I am working on a small gallery and have successfully implemented Salvattore (similar to Masonry). However, a challenge has arisen when resizing the web page - the padding remains at 10px instead of reducing to 5px as desired. The goal is to e ...

Tips for launching a fresh window and embedding HTML into it with jQuery?

I'm attempting to use JavaScript to open a new window, but the HTML content is not being added: var callScriptText = $('#callScriptText').html(); var url = '/Action/CallScript/?callScript='; // Open the current call script in a n ...

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

When the button is left alone, its color will change

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <bod ...

Tips on altering the quantity of columns in a ul list dynamically

I'm trying to create a list with 2 columns, and I want it to switch to 3 columns when the browser window is wide enough (for example, on a 23 inch monitor). Can this be achieved using CSS or any other method? Here is my current CSS: .search-results ...

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...