I'm using Bootstrap 4 and I can't seem to make the submit button the same size as the input. I tried different combinations but every time the button ends up being wider than the input. I'm thinking that's maybe some Bootstrap default CSS for buttons that I don't know about? Thank you!
This is my code: `
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 bg-warning p-2 d-flex justify-content-center" >
<form action="" method="POST" class="p-5 m-1 bg-danger col-8">
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
</div>
</div>
<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
</div>
</form> <!-- end of form -->
</div> <!-- end of column -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</html>
First solution
The reason was your input fields are inside col class and columns class are getting padding-right:15px and padding-left:15px from bootstrap plugin.
You can add class to the column padding_0 something like this
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8 padding_0">
and add style .padding_0{padding-right:0;padding-left:0;}
Second solution
You are adding the col-* to the button.
<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
</div>
Make a parent div something like below code and add col-* class to that div. Also set width:100% to the button.
<div class="row justify-content-center form-group">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
</div>
</div>
Snippet for second solution
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 bg-warning p-2 d-flex justify-content-center">
<form action="" method="POST" class="p-5 m-1 bg-danger col-8">
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
</div>
</div>
<div class="row justify-content-center form-group">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
</div>
</div>
</form>
<!-- end of form -->
</div>
<!-- end of column -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</body>
</html>
Related
Let's say I have this kind of grid columns bootstrap 4 (image on the left) and then I collapse the card 1 using boostrap collapse, and I expected the grid 3 to overlapping the height of row (and the result will be on the right image)
I have tried it using align-item-start and align-self-start, turns out it just like the row class bootstrap..
my investigation is that grid 1 and 2 covered by row class that has certain height (if height 1 < 2 then height 2 will be the row height and vice versa..
is this even possible using bootstrap 4?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row no-gutter">
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapseRekamMedis" aria-expanded="true" aria-controls="collapseRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapseRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
<div class="col-5 float-right">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Informasi Pasien</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsePatientData" aria-expanded="true" aria-controls="collapsePatientData">
Toggle
</button>
</div>
<div class="collapse show" id="collapsePatientData">
<!-- Card Body -->
<div class="card-body py-2">
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">
<nobr>Pasien <i class="text text-danger">*</i></nobr>
</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Maman Abdurrahman">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Usia</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="25 thn">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Diagnosa</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Radang tenggorokan">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Anamnesa</label>
<div class="col-12">
<textarea class="form-control-plaintext" id="patient_name" rows="6">publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsesRekamMedis" aria-expanded="true" aria-controls="collapsesRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapsesRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Silly me, turns out you don't need to user .row class..
simply using .float-left and .float-right on each div
FINAL CODE
<div class="col-7 float-left"></div>
<div class="col-4 float-right"></div>
<div class="col-7 float-left"></div>
I am making a simple login with bootstrap and I am having a problem dealing with this, here is my code:
<div class="container">
<div class="row justify-content-center no-gutters" style="padding-top:150px;">
<div class="col-lg-8">
<div class="card shadow-lg o-hidden border-0 my-5 mx-auto">
<div class="card-body">
<div class="row">
<div class="col-lg-6 p-0">
<div class="p-5">
<div class="text-center">
<h4 class="text-dark mb-4">Login</h4>
</div>
<form class="user">
<div class="mb-3">
<input class="form-control form-control-user" type="email" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Username" name="email">
</div>
<div class="mb-3">
<input class="form-control form-control-user" type="password" id="exampleInputPassword" placeholder="Password" name="password">
</div>
<button class="btn btn-primary d-block btn-user w-100" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the result:
Can somebody help? Thank you so much!
You have used 'col-lg-6'. On large screen it contains only half width of the row. If you remove this class There won't be any extra space. You can read more about grid system
I know how to do a POST html form. However, I have a weird input system right now, and I am confused on how to switch to an HTML Post form.
Here is the HTML code:
<div class="container-fluid" id='room-create' hidden>
<div class="row">
<div class="col-12 h2 mt-5 text-center">Create Room</div>
</div>
<div class="row mt-2">
<div class="col-12 text-center">
<span class="form-text small text-danger" id='err-msg'></span>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3" id='room-created'></div>
</div>
</div>
I already tried switching the first div to a form, but to no avail. How would I make the switch to have this post data to my server ("/")?
What I already tried:
<form action="/" method="post" class="container-fluid" id='room-create' hidden>
<!--- other code here ---->
</div>
(I also did the same switch in the second div, the div with `class="row mt-2"`)
Any help is appreciated!
Thanks so much
I ended up wrapping the entire collection of elements (including the outer divs) in a form. However, it was actually the id of the submit button that was messing it up. I am still not sure why this happened, but for some odd reason, when I remove the id it works.
Just wrap the relevant divs who contain the inputs and the button with form tags. And add type attribute with submit value to the button .
<form action="/" method="post">
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button type="submit" id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
</form>
I need to create from with Bootstrap.
When i use the form inline for create a form, it create a padding-right to label and input and not fill all colmun, but i don't need this padding .
whats the problem ? how can i solve this problem ?
<button type="button"
class="btn btn-primary col-md-2 col-xs-2 col-sm-12 col-lg-2 AddCatBtn">افزودن دسته جدید</button>
<div class="AddCategory col-md-12 col-xs-12 col-sm-12 col-lg-12 border-top border-bottom">
<form>
<div class="form-row text">
<div class="form-inline col-md-6 ">
<div class="col-md-2">
<label for="inputEmail4">نام دسته</label>
</div>
<div class="col-md-10 p-0">
<input type="email" class="form-control" id="inputEmail4">
</div>
</div>
<div class="form-inline col-md-6">
<div class="col-md-3">
<label for="inputState">زیر دسته</label>
</div>
<div class="col-md-9 p-0">
<select id="inputState" class="form-control">
<option>one</option>
<option>tow</option>
</select>
</div>
</div>
</div>
</form>
</div>
<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3>
<div class="vpn-cert" ng-controller="vpnController vpnCert">
<form method="post" name="userform" class="form-horizontal" id="user" ng-submit="save(userform)" novalidate>
<div class="container-fluid">
<div class="form-group" ng-disabled="true">
<div class="row">
<label class="col-sm-6 control-label">Download</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<label class="control-label">Click the link to download </label>
certificate
</div>
</div>
<div class="row">
<label class="col-sm-6 control-label">Renew</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<div class="form-group has-feedback">
<label class="col-sm-2 control-label">Renew the certificate</label>
</div>
<button type="button" class="btn btn-primary btn-default btn-xs" ng-click="vpnCert.renew();">
RENEW
</button>
</div>
</div>
</div>
</div>
</form>
</div>
Any idea how to make it work?
ng-disabled will only work on specific elements like button, input, select etc.
You can read more about ng-disabled in the angular docs https://docs.angularjs.org/api/ng/directive/ngDisabled
Please provide more information to your question to get a better answer