I have this below code but There is an facebook and google+ icon in the code I want to remove those code and retain the login part code but when ever I comment the facebook and google+ icons the login code does not work can anyone help
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Register/login to Student Space</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="assets/css/normalize.css" type="text/css"/>
</head>
<body>
<div class="logmod">
<div class="logmod__wrapper">
<span class="logmod__close">Close</span>
<div class="logmod__container">
<ul class="logmod__tabs">
<li data-tabtar="lgm-2">Login</li>
<li data-tabtar="lgm-1">Sign Up</li>
</ul>
<div class="logmod__tab-wrapper">
<div class="logmod__tab lgm-1">
<div class="logmod__heading">
<span class="logmod__heading-subtitle">Enter your details here<strong>to create an account</strong></span>
</div>
<div class="logmod__form">
<form accept-charset="utf-8" action="#" class="simform">
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-name">Username*</label>
<input class="string optional" maxlength="255" id="username" placeholder="Username" type="text" size="50" />
</div>
</div>
<div class="sminputs">
<div class="input string optional">
<label class="string optional" for="user-pw">Password *</label>
<input class="string optional" maxlength="255" id="user-pw" placeholder="Password" type="text" size="50" />
</div>
<div class="input string optional">
<label class="string optional" for="user-pw-repeat">Repeat password *</label>
<input class="string optional" maxlength="255" id="user-pw-repeat" placeholder="Repeat password" type="text" size="50" />
</div>
</div>
<div class="simform__actions">
<input class="sumbit" type="submit" name="commit" type="sumbit" value="Create Account" />
<!-- <span class="simform__actions-sidetext">By creating an account you agree to our <a class="special" href="#" target="_blank" role="link">Terms & Privacy</a></span>-->
</div>
</form>
</div>
<div class="logmod__alter">
<!-- <div class="logmod__alter-container">-->
<!-- <a href="#" class="connect facebook">
<div class="connect__icon">
<i class="fa fa-facebook"></i>
</div>
<div class="connect__context">
<span>Create an account with <strong>Facebook</strong></span>
</div>
</a>
<a href="#" class="connect googleplus">
<div class="connect__icon">
<i class="fa fa-google-plus"></i>
</div>
<div class="connect__context">
<span>Create an account with <strong>Google+</strong></span>
</div>
</a>
</div>
</div>
</div>-->
<div class="logmod__tab lgm-2">
<div class="logmod__heading">
<span class="logmod__heading-subtitle">Enter your email and password <strong>to sign in</strong></span>
</div>
<div class="logmod__form">
<form accept-charset="utf-8" action="#" class="simform">
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-name">Email*</label>
<input class="string optional" maxlength="255" id="user-email" placeholder="Email" type="email" size="50" />
</div>
</div>
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-pw">Password *</label>
<input class="string optional" maxlength="255" id="user-pw" placeholder="Password" type="password" size="50" />
<span class="hide-password">Show</span>
</div>
</div>
<div class="simform__actions">
<input class="sumbit" type="submit" name="commit" type="sumbit" value="Log In" />
<span class="simform__actions-sidetext"><a class="special" role="link" href="#">Forgot your password?<br>Click here</a></span>
</div>
</form>
</div>
<div class="logmod__alter">
<div class="logmod__alter-container">
<a href="#" class="connect facebook">
<div class="connect__icon">
<i class="fa fa-facebook"></i>
</div>
<div class="connect__context">
<span>Sign in with <strong>Facebook</strong></span>
</div>
</a>
<a href="#" class="connect googleplus">
<div class="connect__icon">
<i class="fa fa-google-plus"></i>
</div>
<div class="connect__context">
<span>Sign in with <strong>Google+</strong></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
The icons are added with the following <i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
Remove them and the icons will be gone
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register/login to Student Space</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="assets/css/normalize.css" type="text/css" />
</head>
<body>
<div class="logmod">
<div class="logmod__wrapper">
<span class="logmod__close">Close</span>
<div class="logmod__container">
<ul class="logmod__tabs">
<li data-tabtar="lgm-2">Login
</li>
<li data-tabtar="lgm-1">Sign Up
</li>
</ul>
<div class="logmod__tab-wrapper">
<div class="logmod__tab lgm-1">
<div class="logmod__heading">
<span class="logmod__heading-subtitle">Enter your details here<strong>to create an account</strong></span>
</div>
<div class="logmod__form">
<form accept-charset="utf-8" action="#" class="simform">
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-name">Username*</label>
<input class="string optional" maxlength="255" id="username" placeholder="Username" type="text" size="50" />
</div>
</div>
<div class="sminputs">
<div class="input string optional">
<label class="string optional" for="user-pw">Password *</label>
<input class="string optional" maxlength="255" id="user-pw" placeholder="Password" type="text" size="50" />
</div>
<div class="input string optional">
<label class="string optional" for="user-pw-repeat">Repeat password *</label>
<input class="string optional" maxlength="255" id="user-pw-repeat" placeholder="Repeat password" type="text" size="50" />
</div>
</div>
<div class="simform__actions">
<input class="sumbit" type="submit" name="commit" type="sumbit" value="Create Account" />
<!-- <span class="simform__actions-sidetext">By creating an account you agree to our <a class="special" href="#" target="_blank" role="link">Terms & Privacy</a></span>-->
</div>
</form>
</div>
<div class="logmod__alter">
<div class="logmod__alter-container">
<a href="#" class="connect facebook">
<div class="connect__icon">
</div>
<div class="connect__context">
</div>
</a>
<a href="#" class="connect googleplus">
<div class="connect__icon">
</div>
<div class="connect__context">
</div>
</a>
</div>
</div>
</div>
<div class="logmod__tab lgm-2">
<div class="logmod__heading">
<span class="logmod__heading-subtitle">Enter your email and password <strong>to sign in</strong></span>
</div>
<div class="logmod__form">
<form accept-charset="utf-8" action="#" class="simform">
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-name">Email*</label>
<input class="string optional" maxlength="255" id="user-email" placeholder="Email" type="email" size="50" />
</div>
</div>
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-pw">Password *</label>
<input class="string optional" maxlength="255" id="user-pw" placeholder="Password" type="password" size="50" />
<span class="hide-password">Show</span>
</div>
</div>
<div class="simform__actions">
<input class="sumbit" type="submit" name="commit" type="sumbit" value="Log In" />
<span class="simform__actions-sidetext"><a class="special" role="link" href="#">Forgot your password?<br>Click here</a></span>
</div>
</form>
</div>
<div class="logmod__alter">
<div class="logmod__alter-container">
<a href="#" class="connect facebook">
<div class="connect__icon">
</div>
<div class="connect__context">
</div>
</a>
<a href="#" class="connect googleplus">
<div class="connect__icon">
</div>
<div class="connect__context">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
Related
I am trying to create a form where I am using fomantic UI but it's not working, the calendar and dropdowns are not responding on click, I've downloaded the semantic UI zip file and included them in my form page but it is not responding, what am I missing here, will deeply appreciate your help on this.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="../resources/assets/Semantic-UI-CSS-master/semantic.css">
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
<script type="text/javascript" src="../resources/assets/Semantic-UI-CSS-master/semantic.min.js"></script>
</body>
</html>
Here's my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="../resources/assets/Semantic-UI-CSS-master/semantic.css">
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
<script type="text/javascript" src="../resources/assets/Semantic-UI-CSS-master/semantic.min.js"></script>
</body>
</html>
Hope this will help. Placement of CSS and js files were incorrect.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>
<div class="ui blue inverted borderless menu">
<a class="active item">
Home
</a>
<div class="right menu">
<a class="item">
Login
</a>
<a class="item">
Sign Up
</a>
<a class="item">
Sign Out
</a>
</div>
</div>
<div class="container centered" id="datacontainer">
<form class="ui form" id="dataform">
<div class="ui card">
<div class="image" id="image-1">
<img src="C:\Users\ABC\Pictures\picture-1.jpg">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>First Name</label> </span>
<input class="forminclass" type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Last Name</label> </span>
<input class="forminclass" type="text" name="last-name" placeholder="Last Name">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Email</label></span>
<input class="forminclass" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Phone</label></span>
<input class="forminclass" type="text" name="phone" placeholder="Phone">
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Gender</label> </span>
<div class="ui selection dropdown">
<input class="forminclass" type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Date of Birth</label> </span>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="dob"type="text">
</div>
</div>
</div>
</div>
<div class="field">
<div class="inline fields">
<span class="indataform"> <label>Text</label> </span>
<textarea id="areat" rows="2"></textarea>
</div>
</div>
<button class="ui green button" id="edit" type="submit">Edit</button>
<button class="ui flex primary button" id="save" type="submit">Save</button>
</form>
</div>
</body>
</html>
I can't make to my fields were full width with bulma:
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>
What am I doing wrong? is-fullwidth and is-expanded haven't any effect.
The problem is form is not full width. You can add custom css to form
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<style>
form {
width: 100%;
float: left;
}
</style>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>
Add class="control" to elements directly inside your panel-block.
Example:
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form class="control" name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>
Im using Bulma Framework, how move Button to the same line with input field?, it looks input field is full width
My code:
<div class="container">
<div class="field">
<div class="control has-icons-left has-icons-right">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
</div>
<a class="button is-info">GO</a>
Result Result image
http://bulma.io/documentation/form/general/#form-addons
If you want the button on the right but not inside the input,
you can use has-addons class to "merge" controls (the input and the button here) like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.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="field has-addons">
<div class="control has-icons-left">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
<div class="control">
<a class="button is-info is-large">GO</a>
</div>
</div>
</div>
Here's how to have a search input that takes 100% of the width with a button at the right without any space (basically, answer from user404 and Sébastien mixed together)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field has-addons">
<div class="control has-icons-left has-icons-right is-expanded">
<input type="text" class="input is-info is-large" placeholder="Enter words to search">
<span class="icon is-medium is-left">
<i class="fa fa-pencil"></i>
</span>
</div>
<p class="control">
<a class="button is-info is-large">SEARCH</a>
</p>
</div>
https://bulma.io/documentation/form/general/#form-addons
Or you just have to group the filed and the button adding "is-grouped" class in the "field" element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field is-grouped">
<div class="control has-icons-left has-icons-right is-expanded">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
<p class="control">
<a class="button is-info is-large">GO</a>
</p>
</div>
When following the Bulma documentation, you can wrap an input.input with a p.control in order to style it and have it spread the width of the container. But, when the container is a form (which it is likely to be) the controls shrink down to their default size. What am I doing wrong?
Code sample below:
<div class="panel">
<div class="panel-heading">
Login
</div>
<div class="panel-block">
<form>
<p class="control has-icon">
<input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
<span class="icon is-small">
<i class="fa fa-envelope"></i>
</span>
</p>
<p class="control has-icon">
<input class="input is-expanded" type="password" placeholder="Password" name="password">
<span class="icon is-small">
<i class="fa fa-lock"></i>
</span>
</p>
<p class="control">
<button class="button is-success" type="submit">
Login
</button>
</p>
</form>
</div>
</div>
I found the answer, annoyingly staring me in the face: you need to set the class of the form to control.
<div class="panel">
<div class="panel-heading">
Login
</div>
<div class="panel-block">
<form class="control">
<p class="control has-icon">
<input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
<span class="icon is-small">
<i class="fa fa-envelope"></i>
</span>
</p>
<p class="control has-icon">
<input class="input is-expanded" type="password" placeholder="Password" name="password">
<span class="icon is-small">
<i class="fa fa-lock"></i>
</span>
</p>
<p class="control">
<button class="button is-success" type="submit">
Login
</button>
</p>
</form>
</div>
</div>
Instead of the form, you will need to enclose each input element with the panel-block class.
From bulma panel documentation.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="panel">
<div class="panel-heading">
Login
</div>
<div class="panel-block">
<p class="control has-icon">
<input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
<span class="icon is-small">
<i class="fa fa-envelope"></i>
</span>
</p>
</div>
<div class="panel-block">
<p class="control has-icon">
<input class="input is-expanded" type="password" placeholder="Password" name="password">
<span class="icon is-small">
<i class="fa fa-lock"></i>
</span>
</p>
</div>
<div class="panel-block">
<p class="control">
<button class="button is-success" type="submit">
Login
</button>
</p>
</div>
</div>
</body>
</html>
Here's the JS Bin.
I've been trying to create a bootstrap form with multiple horizontal and vertical elements but couldn't get what I wanted
Requirement
Main <form> contains vertical <formfield> elements
<formfield> element contain all elements horizontally
<formfield> element has one <div> element that contain some vertical elements inside it
I have accomplished first two requirements without any issue but I'm clueless when it comes to last requirement.I've tried searching on google and stakoverflow but no luck yet.
Needed form
Form I'm getting right now
My Code
<form id="grn_items_form">
<div class="form-inline">
<fieldset id="1" class="grn_item_fieldset ">
<div class="form-group">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control" id="1" class="quantity" type="text" disabled="">
</div>
<div class="form-group">
<button class="form-control" id="1" class="add_serial" type="button">Add Serials</button>
</div>
<div class="row ">
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
</div>
</fieldset>
</div>
<div class="form-inline">
<fieldset id="2" class="grn_item_fieldset">
<div class="form-group">
<button class="form-control" id="2" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control quantity" id="2" type="text" placeholder="Quantity">
</div>
</fieldset>
</div>
</form>
Any suggestion on right direction is highly appreciated.
This should help. It's not actually showing right on jsfiddle but try to copy the HTML and run local.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="row" id="row1">
<fieldset>
<div class="row" id="main">
<div class="col-md-1">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Variation">
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Unit Price">
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<button class="form-control" id="1" class="add_serial" type="button">
Add Serials
</button>
</div>
<div class="col-md-3">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
</fieldset>
</div>
</form>
</div>