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>
Related
I want to use fa-plus-circle item next to the text field as below. How can I achieve that using CSS and HTMl. I haven't use any CSS right now since it's affecting to all the other places that using fa-plus-circle.
.html
<div class="col-sm-6">
<label class="col-sm-3 col-form-label" >My Name <span class="fa fa-star required-field"></span> </label>
<input type="text" class="form-control"><span
class="fa fa-plus-circle text-success cursor-point"></span>
</div>
https://getbootstrap.com/docs/5.0/forms/input-group/
You can use input group for this
<div class="input-group mb-3">
<input type="text" class="form-control">
<span class="input-group-text">
<span class="fa fa-plus-circle text-success cursor-point"></span>
</span>
</div>
Try This way
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-fill">
<input type="text" class="form-control">
</div>
<span class="ml-3 fa fa-plus-circle text-success cursor-point"></span>
</div>
</div>
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>
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>
bootstrap http://i.stack.img
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</form>
</div>
ur.com/liYfx.png
Good evening . Can you help me with bootstrap? I can not combine two inputs into one form and add Font Awesome icon using Twitter Botstrap , like in this picture. Thank You very much .
I did something similar in my last project so here you go:
<div class="container">
<div class="row">
<form role="form">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle:
JSFiddle
Fiddle update:
UpdateFiddle