In Bootstrap 3 there were optional icons for each of the validation states. The icon would appear in the right side of the input using the has-feedback, has-success, has-danger, etc... classes.
How can I get this same functionality in Bootstrap 4 using the valid-feedback or invalid-feedback classes?
Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states (is-valid and is-invalid) that control display of the valid-feedback and invalid-feedback text.
With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the valid/invalid-feedback.
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
HTML
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
Demo of input validation icons
Demo with working validation
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<div class="container">
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
</div>
Notice that the containing form-group is position:relative using the position-relative class.
Form validation icons are built-in Bootstrap 4.3.1, see documentation here : https://getbootstrap.com/docs/4.3/components/forms/#custom-styles
For a client-side validation, you can use ParsleyJS plugin.
See a demo here : https://jsfiddle.net/djibe89/tu0ap111/
Fake code
a simple way to do it with bootstrap 4 is:
<div class="input-group mb-3 border border-success">
<input type="text" class="form-control border-0" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text bg-white border-0 text-success"><span class="iconify" data-icon="subway:tick" data-inline="true"></span></span>
</div>
</div>
obviously you have to include
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
Related
I currently have a small form with 3 elements, a label, input, and button.
I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.
This is the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-auto pb-3 ml-auto">
<form class="form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<button class="btn btn-primary" type="submit" }>Submit</button>
</form>
</div>
#media (min-width: 768px) {
.my-form-inline {
display: flex;
flex-flow: row nowrap;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
<form class="my-form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<div class="form-group mx-sm-3 mb-2">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
One way of achieving this is using Media query in CSS, unless that's not what you are looking for.
In your HTML file add below meta code to head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.
In CSS , use media queries
#media only screen and (min-width: 600px) {
#test{
display: block;
}
}
#media only screen and (min-width: 768px) {
#test{
display: inline-flex;
}
}
Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
I'm new to bootstrap & its glyphicons are not working for me. After I've inspect the code, font-family of glyphicon-user was "Helvetica Neue",Helvetica,Arial,sans-serif & not Glyphicons Halflings. Am I missing something or do i need to change the css file.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
</body>
</html>
You need to add the class glyphicon.
So your span should actually be:
<span class="glyphicon glyphicon-user"></span>
As shown in the documentation: http://getbootstrap.com/components/#glyphicons-how-to-use
It's not enough to name the glyph, you have to use the class glyphicon too.
<span class="glyphicon glyphicon-user"></span>
Also, beware if you are using this in Opera mobile emulator. It doesn't support these fonts properly so you'll get a blank square.
Follow the steps to work Glyphicons icons in your boostrap project:
add fonts folder to your project from recently downloaded from http://getbootstrap.com and below code for sample
<span class="glyphicon glyphicon-user"></span>
Thanks!
I'm very noob in bootstrap. I tried my first bootstrap page and then downloaded a theme from bootswatch.com and replaced the bootstrap.css with the Cerulean theme. When I change the font in the bootstrap.css it stay with the old theme
#import url(//fonts.googleapis.com/css?family=Caesar+Dressing);
but its not reflecting when I refresh my page.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
</style>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">GUVI</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're linking to the right font, yeah; that said, here's my take on this:
In most cases you should use a tag to import Google web fonts. I generally avoid using #import where possible because it delays the loading of the file.
All you should need to do to replace the font is to specify the new font-family as 'Caesar Dressing' inside a body {} style block. Assuming you've already done that in your local copy of bootstrap.css, if that still doesn't work try specifying it inside a tag inside your HTML. You should avoid doing that where possible though; it makes it annoying down the road when you have multiple pages to maintain.
One other thing: I noticed you have some inline styles for some of your inputs. You should really avoid using those where possible--it's good form to try and separate presentation and content markup as much as possible.
Using JqueryMobile, I wish to achieve the following layout:
Having nice decorations boxes to separate my input lines
Having one checkbox aligned vertically with an input text field, both on the same line
But after many attempts, the only layout I could come from with is the following:
The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body style="font-size: 12px;">
<div data-role="page" id="one">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 20%;" >
<div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
<div class="ui-checkbox">
<label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
</span>
</label>
</div>
</div>
</div>
<div class="ui-block-b" style="width: 80%;" >
<div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
</div>
</div>
<div style="height: 200px;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" />
<label for="checkbox-mini-0" > </label>
<input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
</fieldset>
<div style="height: 30px; border:1px solid lightgray;">
</div>
<div style="height: 30px; border:1px solid lightgray;">
</div>
</div>
</div>
</div>
</body>
</html>
Any help or comments to achieve my goal would be appreciated ?
Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/
http://jsfiddle.net/XAsyy/110/
Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow:
data-role="none" ie. <textarea id="test" data-role="none"></textarea>
http://jsfiddle.net/XAsyy/144/
or, use:
css resize: none;
http://jsfiddle.net/nirmaljpatel/XAsyy/