Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
    <div class="form-group">
      <label class="control-label col-sm-2 lb" for="email">Email : </label>
      <div class="col-sm-6">
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Subject : </label>
      <div class="col-sm-6">          
        <select class="form-control col-sm-6 lb" id="subj" name="subject" required>
            <option>General queries</option>
            <option>Group and corporate bookings</option>
            <option>Suggestion and complaints</option>
        </select>
      </div>
    </div>
    <div class="form-group">        
      <label class="control-label col-sm-2 lb" for="pwd">Message : </label>
      <div class="col-sm-6">
        <div class="checkbox">
          <textarea class="form-control" id="message" name="message" required></textarea>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-4 col-sm-6">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
  </form>

I have created a form using Bootstrap, but I need help in centering it perfectly and making it responsive to different screen sizes. Can someone assist me with this? Thank you!

htmlcsstwitter-bootstrap

Answer №1

I'm not sure if I'm right or not.

When utilizing CSS such as,

text-align:center;

It will center the alignment both vertically and horizontally.

Therefore, there is no specific CSS for aligning center vertically only.

Answer №2

To modify the dropdown text and more, follow these steps:

<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
 <div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" 
    placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
     data-toggle="dropdown">
      Categories
<span class="caret"></span>
</button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Programming</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Web Development</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            Software Engineering
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Separated link</a>
      </li>
   </ul>
</div>
      </div>
   </div>
    <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="email" 
            placeholder="Enter Email">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Submit</button>
      </div>
   </div>
</form>

   </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

Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported

I've been experimenting with a custom element for a paper-dialog popup that I want to incorporate. Surprisingly, when I create a test page within the same file where the custom element is defined, using all the identical imports as my main index, it w ...

jqueryhtmlpolymer

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

phpjavascriptjqueryhtmlgoogle-visualization

What are the steps to employ a query string to display a specific image?

If I understand correctly, I can utilize a query string and parse it to display certain information. How would I apply that concept to load a specific image? https://codepen.io/anon/pen/qYXexG <div id="gallery"> <div id="panel"> <img ...

javascripthtmlcss

How can you verify a phone number input?

I have a phone number field in my form that needs validation. The conditions are that the numbers may be 8 digits or 10 digits long, otherwise an error message should be displayed. Is this code snippet correct? <input class="form-control" name="phone_n ...

htmlvalidation

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout What I had hoped for was a layout like this Currently, I am using bootstrap to format the images. My goal is to i ...

csslaravel-8

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

Scroll to the end of the main div's horizontal position instead of using offset().left

I'm struggling with an issue in my code. <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* ...

javascriptjqueryhtmlcssoffset

The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...

jqueryhtmlcsswordpressjquery-mobile

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

jquerycssjquery-plugins

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

pythonhtmlseleniumwebdriverwait

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

javascriptphpjqueryhtml

An unexpected page transition occurs when attempting to delete a link

I've successfully created an HTML table that dynamically adds rows and provides an option to delete the current row. Each row represents data retrieved from MongoDB, and upon clicking the delete button, I aim to delete the corresponding item from the ...

javascriptjqueryhtmlnode.jsexpress

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

javascriptphphtmlvue.jsinput

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

javascriptjqueryhtmldjango-templates

invoking a JavaScript function from an HTML file

I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...

javascripthtmlnode.jswebserver

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

What is the best way for a background-image to determine its height in CSS?

I am currently working on a website project and I would like to include my title using a background-image because it uses a unique font. In my design class, we were taught that this is the best approach. However, I am struggling with setting the correct di ...

htmlimagecss