I am creating a screen to a kiosk/totem machine and I need to use large fonts.
I have a problem using input group with font awesome icons and alignment.
As I use large fonts, I had to add a 'margin-top:10px' to align the input to your label.
The side effect is that the awesome icon becomes misaligned on top.
Fiddle: http://jsfiddle.net/vb0xo8wb/
//markup
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 form-container">
<form class="form form-horizontal" name="regForm" autocomplete="false" novalidate="" role="form">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="col-sm-2 control-label">Nome</label>
<div class="col-sm-10 recuo">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user fa-2x bg-info"></i>
</span>
<input take-focus="" type="text" class="form-control input-lg" name="user_name" required="" placeholder="Digite seu nome">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//css
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
html, html * {
font-family: Roboto;
}
form label {
font-size: 28px !important;
}
form input, form textarea, form select {
margin-top:10px;
font-family: Roboto;
font-weight: bold;
}
.recuo{
padding-left:30px;
}
.fonte_big {
font-size: 28px !important;
}
.form-container {
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
margin-top:50px;
}
Adding
.input-lg {
margin: 0 !important;
}
should fix the issue.
Related
I have a bootstrap 4 input text box. I want make it stop growing after sm break point, so that it won't expand to the full screen width.
Use col-md-* in wrap div of input...
the sm takes all screen and from md and up it takes width as you set in col-md-*
See fiddle:https://jsfiddle.net/s9q4d681/3/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.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.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
</div>
</div>
.row {
margin-top: 20px;
}
.col {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 5px 10px;
}
.col-sm-6 {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 10px;
}
input{
max-width: 340px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Col-6
</div>
<div class="col">
Col-6
</div>
</div>
<div class="row">
<div class="col-sm-6">
<form action="">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
</div>
</div>
</div>
You can simply restrict input field width using max-width CSS property.
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
I have set my default font size to be based on 10px via 62.5%, and then set the body to be 1.4rem. This seems to cause issues with the custom checkbox controls and they no longer align correctly.
I'm using Bootstrap 4's SASS files combined with my own. Is there something in the variables file that I'm missing to fix this? Or maybe some overrides I need to do? I've tried messing with various padding, margins, font sizes, etc. but the way they have this working isn't obvious.
Here is what I have set for the default font sizes for the site:
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
And here is the HTML
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
JSFiddle
To sum up, basically I need the ability to change the body font size and yet still have the checkbox to still work correctly and be the same height as the input fields when they are next to each other.
You can make the parent element flex and use align-items to center vertically. You would also need to use non-absolute position on the checkbox element. That will keep them centered vertically regardless the font size of the page.
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control {
display: flex;
align-items: baseline;
}
.custom-control-indicator {
position: static;
margin: 0 .5rem 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
You could also use top: 50%; transform: translateY(-50%); to center the checkbox vertically, then set the line-height of the text to 1 so it doesn't affect vertical alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control-indicator {
top: 50%;
transform: translateY(-50%);
}
.custom-control-description {
line-height: 1;
}
</style>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
A simple solution would be to change the styles for the checkbox:
.custom-control-indicator {
height: 1.4rem;
width: 1.4rem;
top: calc(1.4rem * 0.25);
}
Change the 1.4rem as required to the same size as the body font-size (you can also set this up to work automatically using SASS variables
I want to print a bootstrap page. Here is my page layout
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="image/logo.png">
</div>
</div>
</div>
<div class="container" id="student">
<div class="row">
<div class="col-sm-4">
<h1>Student</h1>
</div>
<div class="col-sm-offset-2 col-sm-6" id="date">
<form class="form-inline">
<div class="form-group">
<label for="focusedInput"> <b>Date:</b></label>
<input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
</div>
</form>
</div>
</div>
</div>
Also I've css
#font-face {
font-family: "myfont";
src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
font-family: "myfont";
/*-webkit-print-color-adjust: exact;*/
}
img{
width: 150px;
}
#student{
margin-top: 50px;
}
#date{
background: black;
margin-top: 20px;
color: white;
padding: 10px;
}
Problem is: css is not loading properly. I tried searching stackoverflow but did not get any exact solution. How can I do that?
Here is the fiddle https://jsfiddle.net/wc6rga7o/
try
#media print {
/* Your styles here */
body{
color: #111111;
}
#date{
-webkit-print-color-adjust: exact!important;
}
}
updated your fiddle https://jsfiddle.net/wc6rga7o/2/
I am using bootstrap 3 in my website.
I created a row that looks like the following image, within this row, i've created 4 columns:
Left: picture
L-R: text
L-L: Input
Right: Button
Where is my problem ?
1. Set the user/password/input/login button to the left of the columns
2. set button height small
3. "Forgot your password" to be in 1 line and not 2 lines.
Like the following picture:
I am new to HTML/CSS. How can i achieve it ?
Here is my code:
<div class="row loginBody">
<div class="col-md-4 "></div>
<div class="col-md-4 ">
<div class="container-fluid InputLoginDetails LoginFont">
<div class="row LoginRow">
<div class="col-md-4"><img src="img/Hello.png" class="img-responsive" /></div>
<div class="col-md-2">
User:
Password:
</div>
<div class="col-md-3 ">
<input type="text" class="form-control">
<input type="text" class="form-control">
<p>Forgot your password?</p>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary ">Login</button>
</div>
</div>
</div>
</div>
.loginBody{
background-color: #808689;
margin: auto;
margin-top: 5%;
border-radius: 5px;
}
.LoginRow{
padding-top: 3%;
padding-bottom: 3%;
background-color: white;
}
.LoginFont{
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
color: #7296cd;
font-size: 1em;
font-weight: bold;
padding-top: 5%;
}
.InputLoginDetails input[type="text"] {
height: 1.1em;
font-size: 0.9em;
}
I changed several things in your HTML markup.
1.) You don't use .container classes within a row, they are just used as containers outside of rows.
Note that, due to padding and more, neither container is nestable.
Bootstrap Containers
2.) You don't need 4 columns within your '.LoginRow', one for the image and one for the form elements are sufficient and give you more flexibility.
3.) Use the horizontal forms markup of bootstrap to create the form layout.
4.) All in all, you need to take a closer look at the Bootstrap docs and their examples, especially the grid system. Then it is really easy to do a lot of things.
Here is your changed HTML markup:
<div class="row loginBody">
<div class="col-md-4 "></div>
<div class="col-md-4 ">
<div class="InputLoginDetails LoginFont">
<div class="row LoginRow">
<div class="col-md-4"><img src="http://placehold.it/200x200" class="img-responsive"></div>
<div class="col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">User</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<p>Forgot your password?</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You said you wanted to align the User/Password label to the left. Since the bootstrap default labes are aligned to the right, I created this CSS additionally:
.LoginRow .form-group label {
text-align: left;
}
And here is a working bootply
If I understood correctly, and with the code you have provided. I think you didnt have to add both labels with the same div and input boxes. Please check the fiddle to see if thats what you wanted.
I also removed the <p> tag from "Forgot your password".
I changed
<div class="col-md-2">
User:
Password:
</div>
To
<div class="col-md-2">
User:
<input type="text" class="form-control">
</div>
Fiddle