Contact Form with Bootstrap 4 Font Awesome Icons Positioned Beside

https://i.sstatic.net/whRD8.pngI need to reposition my font awesome icons next to the contact form, instead of having them at the top of the form - please refer to the image.

Also, can you advise me on how I can adjust the length and width of the form? I think it's currently too long. Below is the code snippet.

.container {
  margin-left: 15em;
}

.bigicon {
  font-size: 35px;
  color: #FFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
              <div class="col-md-8">
                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
              <div class="col-md-8">
                <input id="email" name="email" type="text" placeholder="Email" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
              <div class="col-md-8">
                <textarea class="form-control" id="message" name="message" placeholder="Message" rows="7"></textarea></div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center"><button type="submit" class="btn btn-primary btn-lg">Submit</button></div></div>
       </fieldset>
       </form>
       </div>
       </div>
       </div>
     </div>
   </div>
 </div>

htmlcssbootstrap-4

Answer №1

To utilize col-*, you must include the class row

<div class="row form-group">

Swap

<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>

with

<div class="col-md-auto"><i class="fa fa-user bigicon"></i></div>

View demo here

Simplest version 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
                        <div class="row align-items-center">
                            <div class="col-auto"><i class="fa fa-user bigicon"></i></div>
                            <div class="col">
                                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                            </div>
                        </div>
</div>

You can also experiment with input group https://i.sstatic.net/Ev7eO.png

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="well well-sm">
                <form class="form-horizontal" method="post">
                    <fieldset>


                        <div class="row align-items-center no-gutters">
                            
                            <div class="col-md-8">
                              <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-user bigicon"></i></span>
                                  </div>
                                  <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                                </div>

                                
                            </div>
                        </div>
                        
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

Answer №2

Check out this code snippet with icons placed inside the input placeholders:

.container {
  margin-left: 15em;
}

.bigicon {
  font-size: 35px;
  color: #808080;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: calc(50% - 0.5em);
  /* Keep icon in center of input, regardless of the input height */
}

input {
  padding-left: 17px;
}

.form-control {
  text-indent: 1.2rem;
}

.input-wrapper {
  position: relative;
}
<link href="https://bootswatch.com/4/cyborg/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <div class="col-md-8">
                <div class="input-wrapper">
                  <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                  <label for="fname" class="fa fa-user input-icon bigicon"></label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                  <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <textarea class="form-control" id="message" name="message" placeholder="Message" rows="1"></textarea>
                  <label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer №3

Although it has been some time since I last delved into Bootstrap, my suggestion is to convert the <span></span> element into a <div></div>. This adjustment should enable Bootstrap to manage the positioning more effectively.

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

Navigating drop down lists using selenium: A step-by-step guide

I have been scouring various websites, including this one, for solutions but so far I haven't had any luck. The website I'm navigating with selenium is coded in HTML4, although I'm not sure if that's relevant, I felt it was worth mentio ...

htmlpython-3.xselenium

Responsive Bootstrap container with flexible column layouts

Forgive me if this sounds silly, but I'm struggling to find an answer for what I want to accomplish... I'm attempting to create a responsive container div (similar to a column inside a row). For example, I would like to achieve the following ef ...

csstwitter-bootstrapreact-bootstrapbootstrap-5

Creating a bootstrap form with an Image field on the right side

I'm using a bootstrap form with 9 input fields, arranged in groups of 3 fields per row to maintain responsiveness. I'd like to learn how to add an image field on the right side that spans three rows. Please review my code below and provide guidan ...

reactjsbootstrap-4

Arranging Bootstrap panels in a stacked layout following the row

Currently, I am in the process of constructing a web dashboard for my application. This dashboard is designed to dynamically load various modules and place them within a Bootstrap container. These modules have varying heights and will stack vertically when ...

htmlcsstwitter-bootstrappanels

I require assistance in adjusting my text to properly wrap around the div image

Struggling to make my text fit around the div on this web page. <div id="othermain"> Are you getting ready for your big day? Do you need alterations or remodeling done to your Wedding Dress, Bridesmaid Dress, or any other Bridal Wear? You're in ...

htmlcss

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

Retrieve data from an external .json file and showcase it on an HTML page

I need to find a way to retrieve data from an external .json file and present it on a webpage using html. Below is the json content: { "jobid": "2018-1109", "overview": "hello world", "links": [ { "rel": "self", "title": "hello world" } ] ...

javascripthtmljson

Div sliding down from the top of the page

I have successfully created a pop up that appears when the user reaches the bottom of the page. Now, I am looking to implement a similar concept but have the pop up appear from the TOP of the page, at a specific location on the page instead of just top or ...

javascriptjqueryhtmlcss

What is the best way to ensure that my label and input element contents are centered and displayed on separate lines?

I need assistance with aligning the contents of my form. I want each label to appear on a separate line with the input content aligned below the label. Can someone help me achieve this? I have shared an image link and my code for reference. My goal is to ...

htmlcssbootstrap-4

Updating the Wordpress menu: Get rid of the list items and instead add the class ".current-menu-item" directly to the anchor tag

Is there a way to customize the output of wp_nav_menu(); to display a navigation menu like this: <nav> <a>Menu Item</a> <a class="current-menu-item">Menu Item</a> <a>Menu Item</a> <a>Menu Ite ...

phphtmlwordpressfunction

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

javascripthtmlcsssiblings

Create a navigation bar for the homepage with a transparent background, while utilizing a black background for all other views on the website. Utilize

As a CSS novice, I've encountered an issue with my Bourbon Refills horizontal navigation bar in my application. The problem is that on the homepage, the navbar is semi-transparent and shows the background image, but I want it to be a different color o ...

htmlcsssass

Leveraging the power of BeautifulSoup to navigate through various levels of

I'm struggling to parse a .htm web page that has 6 layers of divs. I'm trying to extract specific data from these divs, but I'm having trouble finding the right approach. I've experimented with different techniques, but nothing seems to ...

pythonhtmlbeautifulsoupextract

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

javascriptcssbootstrap-4accordionsvg-transforms

Adapting CSS properties dynamically in PHP/JS according to the selected language

I have been implementing a method to incorporate multiple languages into my website, following the guidelines provided in this resource: However, I'm currently encountering an issue where the button name is specified in CSS using "content: '&apo ...

javascriptphpjquerycss

What is the best way to ensure that Bootstrap thumbnail images have uniform heights to perfectly align the thumbnail panels?

My current issue involves using Bootstrap thumbnails with SVG images that I sourced from Wikipedia. Unfortunately, the SVG images are of varying sizes, causing the thumbnail panels to become misaligned. Is there a method I can utilize to ensure that all t ...

htmlcsstwitter-bootstrapsvg

Choose and manipulate a set of elements using Jquery

Below is a piece of code I have: <div class="timeline"> <div class="timeslice" data-tid="360"></div> <div class="timeslice" data-tid="360"></div> <div class="timeslice" data-tid="360"></div> <di ...

jqueryhtmlselector

Troubleshooting problem with CSS hover effect on background images

Can anyone assist me with creating a simple mouse hover effect on these two images? I am having trouble getting it to work. I am looking for a fade transition to occur when the mouse is over the images. Thank you in advance! * { padding: 0; margin: ...

htmlcsstransitionmousehover

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

javascripthtml