I'm trying to create a Login page. The problem is when i try to minimize the page the save copy check box and the send button are overlapped. i'm assuming i need to change something in the CSS. But i'm not sure exactly what. Here is the link : https://jsfiddle.net/talamusiclover/ctqgkxcw/
<!DOCTYPE>
<html ng-app="myApp">
<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" type="text/css" href="C:\Users\etashah\Desktop\email.css">
<div class="container" >
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form name="myForm" ng-controller="emailController">
<div class="form-group1" >
<label for="exampleInputEmail1">Contacts</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="email.text" >
</div>
<div role="alert">
<span class="error alert" ng-show="myForm.$error.required">
Required!</span>
<span class="error alert" ng-show="myForm.$error.email">
Not valid email!</span>
</div>
<div class="form-group2">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="form-group3">
<label for="message">Message</label>
<textarea class="form-control" id="message"></textarea>
</div>
<div class="blueBox">
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<div class="checkbox">
<label class="checkboxLable"><input type="checkbox">Save a copy</label>
</div>
</div>
</div>
<div class= "button">
<div class="col-sm-u-8 col-sm-10">
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
<div style="clear: both;"></div>
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
<br><br><br>
</div>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"> </script>
<script src= "C:\Users\etashah\Desktop\email\controller.js"> </script>
</body>
</html>
You can use pull-right class to keep the checkbox in right side. Then it will.
Delete the position: relative; from your button css, then your css for the button is:
.button {
color: #4CAF50;
font-size: 25px;
border-radius: 30px;
color: black;
right: 10px;
bottom: 30px;
}
The problem is, that your HTML code used bootstrap grid system while you overwriting them in your css file.You can read more about Bootstrap here Bootstrap
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I am having tremendous trouble taking my test state version of my mailchimp opt-in and applying it to my website (built on the weebly platform).
My Goal: Creating a custom Mailchimp Opt-in form on Weebly.
Problem: Test version (locally hosted) of opt-in utterly fails on Production version (weebly platform).
I think one library or another is getting overridden. Perhaps the mailchimp CDN, but not sure.
Libraries used:
Bootstrap
FontAwesome
Mailchimp CDN
I am adding it to my weebly site using the code embed snippet tool. Which is probably adding another layer of complexity to the functionality.
Here is my opt-in form code:
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
#mc_embed_signup {
background:#283184;
color: white;
clear:left;
font:19px Helvetica,Arial,sans-serif;
width: 800px;
padding: 20px;
border-radius: 15px;
}
.btn {
background-color: #339bff;
color: white;
margin-top: 10px;
}
.label {
font: 28px;
}
.asterisk {
color: red;
}
</style>
<!-- container Body -->
<div id="mc_embed_signup" class="container">
<form action="https://silverlinkfunding.us17.list-manage.com/subscribe/post?u=459fcc96e094a6b4dbe3e69f8&id=4afd1b9608" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2 class="text-center"><b>Apply Now</b></h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<!-- Name Row -->
<div class="row form-group">
<div class="col-sm-6 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-FNAME">First Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-FNAME" name="FNAME" aria-describedby="firstName" placeholder="Enter First Name">
</div>
</div>
</div>
<div class="col-sm-6 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-LNAME">Last Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-LNAME" name="LNAME" aria-describedby="lastName" placeholder="Enter Last Name">
</div>
</div>
</div>
</div>
<!-- Email Row -->
<div class="row form-group">
<div class="col-sm-12 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-EMAIL"><i class="fas fa-envelope"></i> Email Address<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-EMAIL" name="EMAIL" aria-describedby="email" placeholder="YourEmail#Domain.com">
</div>
</div>
</div>
</div>
<!-- Phone Row -->
<div class="row form-group">
<div class="col-sm-12 mc-field-group">
<div class="row">
<div class="col-sm-12">
<label for="mce-MMERGE3"><i class="fas fa-phone"></i> Phone <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE3" id="mce-MMERGE3" aria-describedby="phone" placeholder="(xxx) xxx-xxxx">
</div>
</div>
</div>
</div>
<!-- Business, City, State Row -->
<div class="row form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE4"><i class="fas fa-briefcase"></i> Business Name<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE4" name="MMERGE4" aria-describedby="businessname" placeholder="My Businesss LLC">
</div>
<div class="col-sm-4 mc-field-group">
<label for="mce-MMERGE5"><i class="fas fa-city"></i> City<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE5" name="MMERGE5" aria-describedby="city" placeholder="Enter City Name">
</div>
<div class="col-sm-2 mc-field-group">
<label for="mce-MMERGE9"><i class="fas fa-map-pin"></i> State<span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" id="mce-MMERGE9" name="MMERGE9" aria-describedby="state" placeholder="">
</div>
</div>
</div>
</div>
<!-- Phone Row -->
<div class="row form-group">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE7">Loan Amount Requested <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE7" class="required" id="mce-MMERGE7" placeholder="$xx,xxx">
</div>
<div class="col-sm-6 mc-field-group">
<label for="mce-MMERGE8">Cash Available For Investment <span class="asterisk">*</span>
</label>
<input type="text" class="form-control required" value="" name="MMERGE8" class="required" id="mce-MMERGE8" placeholder="$xx,xxx">
</div>
</div>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_459fcc96e094a6b4dbe3e69f8_4afd1b9608" tabindex="-1" value=""></div>
<div class="clear d-flex justify-content-center"><input type="submit" value="Apply Now" name="subscribe" id="mc-embedded-subscribe" class="button btn" onclick="window.open('https://www.silverlinkfunding.com/thank-you-application.html')"></div>
</div>
</form>
</div>
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='MMERGE3';ftypes[3]='phone';fnames[4]='MMERGE4';ftypes[4]='text';fnames[7]='MMERGE7';ftypes[7]='text';fnames[8]='MMERGE8';ftypes[8]='text';fnames[5]='MMERGE5';ftypes[5]='text';fnames[9]='MMERGE9';ftypes[9]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Test State (on local machine):
Form validation works - stays on page onclick and alerts various form
windows which don't meet validation.
Form opts in successfully to mailchimp
Form redirects to /thank-you-application page
Production State (hosted on weebly):
Form validation Fails
Form validation doesn't stop redirect to thank you page
several fontawesome icons fail
Currently live version of the opt-in form: https://www.silverlinkfunding.com/color-me-mine.html
My Questions:
Is a library getting overridden?
Is Something on weebly overriding everything?
Did I just code it wrong?
Am I calling the CDN's or libraries improperly?
I really appreciate your help!
In your console you should be able to see four warnings like the one below:
[blocked] The page at https://www.silverlinkfunding.com/color-me-mine.html was not allowed to run insecure content from http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js.
Perhaps you could try loading those files over https to see if this solves the issue concerning MailChimp.
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance
As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I want to create tooltip for input box similar to this.
But when I try in my code there is too much space left in between input box and tooltip as shown in below image. I am using two different columns for input box and tooltip.
My Code for username & tooltip row is as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-0 col-sm-3"></div>
<div class="col-xs-11 col-sm-4">
<form action="<?php echo base_url('loginclient/verify'); ?>" method="post" name="login_form" onsubmit=" return validateForm()">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" />
</div>
</div>
<div class="col-xs-1 col-sm-1" style="background-color:pink">
<a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username">?</a>
</div>
<div class="col-xs-0 col-sm-4"></div>
</div>
Bootstrap Grid system having default padding for column class so use inline css to overhead the padding like
<div class="col-xs-1 col-sm-1" style="background-color:pink; padding:0px !important;">
the parent div of form has a padding-right (and also padding-left) of 15px
you can apply a style to it to correct it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-0 col-sm-3"></div>
<div class="col-xs-11 col-sm-4" style="padding-right:0;">
<form action="<?php echo base_url('loginclient/verify'); ?>" method="post" name="login_form" onsubmit=" return validateForm()">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" />
</div>
</div>
<div class="col-xs-1 col-sm-1" style="background-color:pink">
<a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username">?</a>
</div>
<div class="col-xs-0 col-sm-4"></div>
</div>
This is happening because columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Best way is to use .input-group-addon
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.input-group {
position: static;
}
.input-group-addon {
background-color: #fff;
border: 0;
}
.input-group .form-control {
border-radius: 4px!important;
}
</style>
<div class=container>
<div class="input-group" style="width:250px;">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></span></span>
</div>
</div>
Follow html structure like this. This is the best way use tooltip with text box.
.input {
position: relative;
padding-right: 100px;
}
.qtooltip {
position: absolute;
top:5px;
right:75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php echo base_url('loginclient/verify'); ?>" method="post" name="login_form" onsubmit=" return validateForm()">
<div class="form-group">
<div class=" input">
<input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" />
<div class="qtooltip">
<a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username">?</a>
</div>
</div>
</div>