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

Issue with PHP and HTML Character Interactions

My variable looks like this: $name=' 18 " LCD TV '; When attempting to use it in an HTML input, the characters after the " do not display. Any suggestions on how to fix this issue? ...

phphtml

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

javascripthtmlangular

Unable to scroll through embed code on iOS responsive devices

-webkit-overflow-scrolling: touch; overflow-y: scroll; I have attempted using this code but unfortunately it is still not functioning as expected. The issue seems to only occur on iOS responsive devices, as it works fine on other devices including MAC. ...

iosiphonecssresponsive-designresponsive

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

Splitting up website content dynamically across various pages

I am interested in developing a webpage that showcases different versions of my code in a tabular format, arranged in reverse chronological order. An example of how I want it to look is provided below. Number Release Date End Date Requires ...

htmlcssweb

The layout of my CSS grid item is slightly off, but the overall result is nearly accurate

Exploring the realms of CSS grid on my website has led me to create an intriguing "add friend" menu design. The layout I am aiming for is depicted in this visual representation: Here is a snippet of the HTML and SCSS code being used: .container { ...

htmlcsslayoutcss-grid

The functionality to generate forms on the click of a button appears to be malfunctioning

I am currently attempting to dynamically create Bootstrap Panels using an `onclick` function. However, I want each Panel to generate multiple forms when the button is clicked. In my current code, the first Panel successfully creates forms when the button i ...

javascriptjquerytwitter-bootstrap

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Submitting user inputs from an HTML form into a MySQL database using PHP

I've successfully put together an HTML form that is meant to capture user input data and insert it directly into a table within mySQL. newuser.php file <?php //including the connection page include('./DB_Connect.php'); //create a n ...

phphtmlmysqlforms

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

htmlcsscheckbox

An image that is in motion at an inappropriate time

My website has run into an issue. Within the navigation bar, there are two unordered lists containing list items and nested ul tags with images in some of the list items. When applying animations, the image moves along with the tabs. Here are visual exampl ...

htmlcss

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

css.netazurebotframework

What could be causing the server to return an empty response to an ajax HTTP POST request?

Attempting to make a POST request using ajax in the following manner: $.ajax({ type: "POST", url: 'http://192.168.1.140/', data: "{}", dataType: "json", ...

javascripthtmljqueryajax

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

Creating a scrollable nested div on a mobile website

Is there a way to achieve a scrollable nested div on a jQuery mobile site? I am aiming for a fixed header and footer with the middle section being scrollable. Despite my attempts to set overflow:scroll (along with specifying the width and height of the div ...

csshtmljquery-mobilescrollable

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

Ensuring the precise alignment of a singular component in Angular 8 while keeping the styles of its child elements unchanged

Is there a way to centralize div elements within a component without impacting the styles of those specific divs? How can I achieve this? I'm currently working with Angular 8. Using the text-align method affects the alignment of the text inside the d ...

cssangularfrontend

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Is it possible to trim a video using HTML code?

I am trying to find a way to crop a video using HTML 5. <video id="glass" width="640" height="360" autoplay> <source src="invisible-glass-fill.mp4" type="video/mp4"> </video> Currently, the video has a resolution of 640x360. However ...

javascriptjqueryhtmlhtml5-video

Enhancing an element with a modifier in CSS using BEM conventions without the need for @extend

Trying to grasp the best method for writing BEM modifier rules within parent classes. I've utilized SASS's @extend but question if this is the right approach. For example: If there is a class called .form structured like this: <div className= ...

csssassbem