I am trying to improve my Bootsrap skills but need help for an issue about card and forms.
Trying to fit form in card but couldn't make it. Has anyone an idea about this issue?
<div class="row row-content col-sm-8">
<div class="card">
<h3 class="card-header card-warning" style="width: 100%">Featured</h3>
<form class="form-group col-sm-12 row">
<div class="col col-md-3 col-sm-3">
<label><strong>Number of Guests</strong></label>
</div>
<div class="col col-md-9 col-sm-9 align-items-center">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
</div>
<div class="col-xs-12 col-sm-3 align-items-center">
<p style="padding: 10px"></p>
<p><strong>Date and Time</strong></p>
</div>
<div class="col-sm-9 col-md-9 form-inline">
<label class="sr-only" for="inlineFormInput">Date</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Date">
<label class="sr-only" for="inlineFormInputGroup">Time</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Time">
</div>
</div>
<div class="col-sm-3">
</div>
<div class="col col-offset">
<a class="btn btn-primary" href="#">Reserve</a>
</div>
</form>
</div>
</div>
Reserve button stays outside of card, why form doesn't fit to card here?
Button should be in card also..
I solved this problem as changing code like this.
<div class="row-content col-sm-8">
<div class="card">
<h3 class="card-header card-warning" style="width: 100%">Featured</h3>
<form class="col-sm-12 row">
<div class="col-xs-12 col-sm-3 align-items-center">
<label><strong>Number of Guests</strong></label>
</div>
<div class="col-sm-9 col-md-9 input-group">
<label class="radio-inline" style="padding-left:">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 4
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 5
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 6
</label>
</div>
<div class="col-xs-12 col-sm-3 align-items-center">
<p style="padding: 10px"></p>
<p><strong>Date and Time</strong></p>
</div>
<div class="col-sm-9 col-md-9 input-group align-items-center row">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar-o fa-fw"></i></span></span>
<input type="text" class="form-control" aria-label="Date" placeholder="Date">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o fa-fw"></i></span></span>
<input type="text" class="form-control" aria-label="Text input with radio button" placeholder="Time">
</div>
</div>
</div>
<div class="col-sm-3">
</div>
<div class="col col-offset">
<a class="btn btn-primary" href="#">Reserve</a>
</div>
</form>
</div>
</div>
Related
<div formArrayName="partners" style="margin-top:15px;" *ngIf="partner">
<div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i">
<div class="partner-background">
<div class="row">
<div class="col col-12">
<h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6>
</div>
<div class="col col-6">
<div class="input-group mb-3 mt-1">
<div class="input-group-prepend">
<span class="input-group-text">Full Name</span>
</div>
<input type="text" class="form-control" formControlName="p_first_name">
</div>
</div>
<div class="col col-6">
<div *ngFor="let type of types().controls; let j = index" [formGroupName]="j">
<div class="row" style="margin-top:5px;">
<div class="col col-3">
<label for="type" style="font-size:18px;">Type</label>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="urban">
<label class="form-check-label">Urban</label>
</div>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="rural">
<label class="form-check-label">Rural</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">DOB</span>
</div>
<input type="text" class="form-control" formControlName="p_dob">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Sex</span>
</div>
<!-- <input type="text" class="form-control" formControlName="p_sex"> -->
<select class="form-control" formControlName="p_sex">
<option value="" selected>Select sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input type="text" class="form-control" formControlName="p_email">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Phone No</span>
</div>
<input type="text" class="form-control" formControlName="p_phone">
</div>
</div>
</div>
</div>
</div>
In most cases, you need to add multiple form controls inside one form group or multiple form controls inside the form array.
For checkbox, you need to add multiple form controls inside one formArray like this.
const arr = [this.fb.control(false), this.fb.control(false)];
fbArray = this.fb.array(arr);
const form = this.fb.group({
checkbox: fbArray,
});
I want that the input fiels are in the same line. But I don't know what am I doing wrong. Can somebody help me? I am using Bootstrap 4.
This is how I wanted it:
enter image description here
html code
<body>
<div class="container h-100">
<div class="row">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
</form>
</div>
<div class="col-md-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
Add "form-row" or "row" in your code.
<form>
<div class="container">
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
OR
<form>
<div class="container">
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
Restructure you form.
- Use one tag for this form. Do Not use for every input a form tag.
- delete the div with class form-inline.
- Add class form-inline to div with class="col-md-6 offset-md-3".
<div class="container">
<form>
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</form>
</div>
Row or form-row doesn't really matter. Form-row changes the gutter. It's to your own preference.
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces.
I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.
This is the fiddle I have created to reproduce the problem.
.border {
border: 1px solid;
}
.input-field {
height: 20px
}
.custom-label {
line-height: 3.3em !important;
}
.label-size {
font-size: 10px;
line-height: 2.1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<form class="form-horizontal">
<div class="col-md-8">
<div class="form-group">
<label for="name" class="col-md-4 label-size">Name</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender" class="col-md-4 label-size">Gender</label>
<div class="col-md-8">
<select id="gender" class="form-control input-sm input-field label-size">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size checkbox-primary" >
<label class="col-md-3">
<input type="checkbox" id="Func1"> Func1</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func2</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func3</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="country" class="col-md-4 label-size">country</label>
<div class="col-md-8">
<select id="country" class="form-control input-sm input-field label-size">
<option>Select</option>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="col-md-3">
<label class="label-size">Options</label>
</div>
<div class="col-md-9">
<div class="checkbox checkbox-primary label-size col-md-3">
<!-- there is a for loop here-->
<!-- For every run of loop, one div [with col-xs-4] below will be created. Since loop is not there, I am creating multiple divs manually -->
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="addr" class="col-md-4 label-size">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="authro" class="col-md-4 label-size">authro</label>
<div class="col-md-8">
<input type="text" id="authro" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="range" class="col-md-4 label-size">Range</label>
<div class="col-md-3">
<input type="text" id="range" class="form-control input-sm input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="ip" class="col-md-4 label-size">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-xs-10 ">
<div class="form-group ">
<div class="col-xs-4">
<button class="btn btn-xs" type="button">Start</button>
</div>
<label class="col-xs-2 label-size">Order</label>
<div class="radio" class="col-xs-4 label-size">
<label>
<input type="radio" name="order3">order3</label>
<label>
<input type="radio" name="order4">order4</label>
</div>
</div>
</div>
</form>
</div>
Any help is much appreciated.
I made some format changes to your code see if this fix your need.
http://jsfiddle.net/ayang10/sbcobqz9/66/
.form-horizontal .control-label {
text-align: right;
margin-bottom: 0;
padding-top: 7px;
}
should fix your format/alignments
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- 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">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I am not frontend developer. I am using bootstrap my current code like below image:
<div class="panel-body">
<form action="">
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Full Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" ng-model='Profile.full_name ' name='full_name' readonly>
</div>
</div>
</div>
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Company Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" readonly ng-model='Profile.company_name ' name='company_name'>
</div>
</div>
</div>
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Mobile Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" readonly ng-model='Profile.mobile_number ' name='mobile_number'>
</div>
</div>
</div>
<div class=" col-xs">
<img src="\images\blank.jpg" alt="\images\blank.jpg" >
</div>
</form>
</div>
I want my image looks like this :
<div class="panel-body">
<div class="col-md-8">
<form action="">
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Full Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputDefault" ng-model='Profile.full_name ' name='full_name' readonly>
</div>
</div>
</div>
<div class="form-group ">
<div class="row">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="text" ng-model='Profile.email' id="email" name='email' readonly class="form-control ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<img src="\images\blank.jpg" alt="\images\blank.jpg" >
</div>