Relocate the Bootstrap selector box form to align with the left side of the page

I have included the Bootstrap CDN in my project, and I am encountering an issue with a form that contains a dropdown box. The problem is that the legend tag is properly aligned to the left of the page, but the selector box is slightly indented towards the center. How can I adjust the selector box to align with the left side of the page so that it lines up with the legend tag?

<form class="form-horizontal" action="{{ url_for('db_selected') }}" name="Item_1" method="POST">
    <fieldset>
    <legend>Select a Database</legend>
    <div class="form-group">
    <label for="select" class="col-lg-2 control-label">Database:</label>
    <select id="DB" class="form-control" name="Item_4" style="width: 70%" >
        <option></option>
        {% for item in coll_name %}
            <option value="{{item}}">{{item}}</option>
        {% endfor %}
    </select>
    <br>
</div>
<div class="form-group">
  <div class="col-sm-10 col-lg-offset-2">
    <button type="submit" class="btn btn-success">Submit</button>
  </div>
</div>
</fieldset>
</form>

Answer №1

Feel free to review the sample output of your code. I've updated the DOM and included some css as well.

select#DB {
  display: inline-block;
}
.control-label{
  text-align: left;
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="fluid-container">
    <form class="" action="{{ url_for('db_selected') }}" name="Item_1" method="POST">
        <fieldset>
        <legend>Select a Database</legend>    
        <div class="form-group">
        <label for="select" class="control-label">Database:</label>
        <select id="DB" class="form-control" name="Item_4" style="width: 70%" >
            <option></option>
            <option value="item">item</option>
            <option value="item">item</option>
            <option value="item">item</option>
        </select>
        <br>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
    </fieldset>
    </form>
</div>

Take a look at this Fiddle for reference. I hope this information is valuable.

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

Create stunning HTML emails by incorporating a transparent background color behind images and text

Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

The behavior of placing an <a> element within an inline <li> element

I find the HTML / CSS result below to be quite puzzling and unexpected. I am eager to understand the reasoning behind how this is being interpreted. Consider: #nav { list-style-type-none } #nav li { display: inline; } /* make the LI's stack ho ...

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

Unable to mark checkboxes in Bootstrap 4 Dropdown (triggered by vue.js) due to unresponsive behavior

When using Vue.js to open a Bootstrap Dropdown, I encountered an issue with selecting custom checkboxes within the dropdown menu. I have come across information about event.stopPropagation() potentially causing this problem, but I am unsure where to imple ...

The text for the Google chart is nowhere to be found

After creating a test project using the Google Chart example, I noticed that some text from the chart is missing after adding CSS. Here is the CSS code I used: html, body { font-size: 100%; height: 100%; width: 100%; } body { background: ...

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. https://i.sstatic.net/pGxzt.png I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: { ...

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

The width of each column in this dataset is variable and unknown

I need to organize a varying number of items into columns. The sizes of both the items and container are unknown, as well as how many columns will fit or what width they should be. I want the browser to arrange the items in as many columns as possible with ...

yii2 truncates CSS classes in the email templates

My email sending process involves using a template: $content='Message'; Yii::$app->mailer->compose('@app/mail/templates/templ', ['content'=>$content]) ->setFrom('<a href="/cdn-cgi/l/email-protection" c ...

Create waypoints on multiple elements

I am working on implementing a unique feature using a div tag with the class "dipper." <div class = "dipper"> <p>Peekaboo</p> </div> As part of this implementation, I have included a script that triggers the display of the "dipper ...

What steps should I take to ensure proper rendering of CSS in Django?

Hey there! I'm new to Django and I'm struggling to get my css to display properly. I'm trying to create a red notification, similar to Facebook, for my unread messages. But for some reason, my css isn't rendering. Can anyone point out w ...

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results. I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being ...

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

Stylesheets do not have the capability to support template tags

Imagine you have created a stylesheet in Django within the static files and everything is working smoothly. However, when trying to use the following line, an error occurs: .PostProfilePic { width: 50px; height: 50px; border-radius: 50%; background ...

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...