I am trying to center an input text using Materialize CSS but the "center" and "center-align" classes seem to have no effect. I cannot figure out what am I missing here
<div class="section">
<div class="row center-align">
<div class="input-field col s3 center-align">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s3 center-align">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</div>
.center-align only applies text-align: center; which has no effect on floating elements.
Use their grid classes: col s4 offset-s4:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="section">
<div class="row">
<div class="input-field col offset-s4 s4">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col offset-s4 s4">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</div>
To make it responsive, you can play with different offsets for different widths:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="section">
<div class="row">
<div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</div>
Related
I have an below code.I would like to know how to increase the height of "container" class.I have check in google but unable to find any solution.Please check my below code and advise how to do this
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" >
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/logo.jpg" alt="logo" class="logo" style="width:130px;height:130px">
</div>
<p class="login-card-description">Sign In</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4 text-align: center;" type="button" value="Login">
</form>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
</main>
In css file:
.container{
height: 1000px
}
OR
<div class="container" style= "height:1000px;">
Keep in mind that div and main are both block elements so it can be an idea to inspect that the main element does not block the height increase of the div.
You can add class to your container, just like in your <main:
<div class="container min-vh-100">
Try any one of the ways:
External CSS
.container {
height: 1000px
}
Inline CSS
<div class="container" style="height: 1000px;">
Maybe you want only pass the image down, just like this?
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" style="margin-top: 150px" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login2.jpg" alt="login" class="login-card-img" style="margin-top: 150px" />
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/logo.jpg" alt="logo" class="logo" style="width:130px;height:130px">
</div>
<p class="login-card-description">Sign In</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4 text-align: center;" type="button" value="Login">
</form>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
</main>
I have a form like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<div class="row">
<form class="col s12" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s10">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s10">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s10">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
</form>
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
I want to horizontally center the form input fields within the .container div and left align the h3 and submit button with those input fields but can't figure out how to do it using Materialize helpers and built-in grid classes. I've tried .center-align but as per the docs its only for text. I'm missing something in how the grid system works. Thanks in advance!
While using Materialize you can use the grid utility of push/pull to center your col.
Explanation:
If you have col s8, then the remaining columns for this row is 4 so to center it there should be col s2 before col s8.
Now, push-s2 will acts as an empty col s2 before col s8 so it will be centered.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<div class="row">
<form class="col s8 push-s2" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s12">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
<div class="row">
<div class="col s12">
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
</form>
</div>
</div>
Disadvantages of this way
You can't do this way with an odd col number (ie: col s7) because then the remaining columns for this row is 5 and there is no col s2.5 neither push-s2.5.
My Opinion
Remove <div class='row'> from above form and remove class='col s12' from inside the form, instead you can use max-width with margin: 0 auto to center the form then keep everything else as is, see below:
.main-form {
max-width: 700px;
margin: 0 auto;
}
#media (max-width: 768px) {
.main-form {
max-width: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
<form class="main-form" onSubmit={formSubmit}>
<h2>Login</h2>
<div class="row">
<div class="input-field col s12">
<label for="username">Username</label>
<input name="username" type="text" />
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input name="password" type="password" />
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="submit" value="submit" class="btn waves-effect waves-light" />
</div>
</div>
<div class="row">
<div class="col s12">
<p>Don't have an account? <strong>Register</strong></p>
</div>
</div>
</form>
</div>
I'm using Bootstrap 4.
I would like set "label 3" with the same width that "label 1". The input width, the rest of the page (see code)
It's possible?
Thanks.
<div class="form-row">
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12">
<div class="form-group row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
Instead of putting a row beside form-group, add another div that have a form-row, something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-row">
<div class="col-6">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
</div>
</div>
I think the issue is mostly the padding of row, but not sure. I just rearranged it properly, by separating row/form-row
How to place lines between columns. This is the below code i am working on but still not working. is there any way we can add separator? i added the screen shot what i am expecting.
HTML Code:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Expecting to place this code to show lines:
<div class="col-md-2 col-sm-4">
<div class="line">|</div>
<div>OR</div>
<div class="line">|</div>
</div>
I want output like this.
|
Name | Email
OR
Phone Button |
|
I'm not sure if this is what you're trying to do.
.v-line {
width: 5px;
background-color: teal;
}
.or {
background-color: #e9ecef;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="d-flex flex-row">
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="v-line d-flex align-items-center justify-content-center">
<span class="or">OR</span>
</div>
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</div>
</form>
</div>
You can shrink the fields by one col unit, so that both the left and right fields are col-md-5. This will give them a total column span of 10, leaving 2 spare (as Bootstrap columns always total 12).
From here, you can add offset-md-2 to the right-most columns to create a gap composed of 2 columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-md-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Note that you cannot (easily) make the gap comprise of only 1 unit while keeping both columns the same length (as the total column count is even). However, you can make use of any combination of column + offset + column that totals twelve. For example, col-md-5 + offset-md-1 + col-md-6.
I know there is a better way to do this but right now this is I can remember. Basically, just create an empty col div in between the two columns:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-5"`enter code here`>
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
I'm trying to make a form with bootstrap 4, and I have a problem with align one column to the bottom:
And this is my code:
<div class="col-md-3 m-2">
<div class="row">
<div class="col-12 d-flex flex-column border border-primary bg-light rounded form-group h-100">
<h3>text</h3>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
</div>
<div class="col-12 border border-primary bg-light rounded form-group h-100 col align-self-end">
<h3>bottom box</h3>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
<div class="form-group">
<label for="i1">i1</label>
<input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
</div>
</div>
</div>
</div>
https://jsfiddle.net/rotor82/c7ugmsw8/3/
I'm not sure how to fix it, I tried align-self-end but it doesn't work.
If you set the following element to margin-bottom: 0 (it's currently set to 15px), you'll solve your problem.
.col-md-3.m-2:nth-of-type(2) .col-12:last-of-type {
margin-bottom: 0;
}
jsFiddle