I am trying to align a check box and a submit button in the center of a simple form
I tried doing the same using "mx-auto" class.
But it is not working
How do I align my submit Button, Check box in middle or in right side?
<div class="container">
<h3>Please Login</h3>
<form #userForm="ngForm">
<div class="form-group">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
<label for="email">Email address</label>
</div>
</div>
<div class="mx-auto">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
<label class="form-check-label" for="remember-me">
Remember Me
</label>
</div>
</div>
</div>
<div id="submit" class="mx-auto">
<button type="button" type="submit" class="btn btn-primary">LOGIN</button>
</div>
</form>
</div>
Here is the output :
Use this, you can handle it separately
<div class="container">
<h3>Please Login</h3>
<form #userForm="ngForm">
<div class="form-group">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
<label for="email">Email address</label>
</div>
</div>
<div class="row">
<div class="mx-auto">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
<label class="form-check-label" for="remember-me">
Remember Me
</label>
</div>
</div>
<div class="form-group">
<button type="button" type="submit" class="btn btn-primary">LOGIN</button>
</div>
</div>
</div>
</form>
</div>
If you add the text-center class to your container, everything inside will be aligned center.
See Demo below:
<!-- CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<div class="container text-center"> <!-- text-center here -->
<h3>Please Login</h3>
<form #userForm="ngForm">
<div class="form-group">
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="email"
placeholder="name#example.com"
/>
<label for="email">Email address</label>
</div>
</div>
<div class="mx-auto">
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="remember-me"
checked
/>
<label class="form-check-label" for="remember-me">
Remember Me
</label>
</div>
</div>
</div>
<div id="submit" class="mx-auto">
<button type="button" type="submit" class="btn btn-primary">
LOGIN
</button>
</div>
</form>
</div>
Related
Form horizontal isnt aligning the label and fields horizontally.
I have a page with a form (which has 4 fields)and a submit and a list at the bottom. I used for the form and another for the list.
I want the form to align as in bootstrap horizontal form. My bootstrap.min.css is this version -> Bootstrap v4.5.0.
My code is as below:
<p-messages [(value)]="msgs"></p-messages>
<p-panel >
<p-header>
Header Example
</p-header>
<form [formGroup]="testForm" (ngSubmit)="submitForm(testForm.value)" class="form-horizontal">
<div class="form-group" *ngIf="!this.isTest" style="padding:10px;">
<label class="control-label col-sm-2">Name:</label>
<div class="col-sm-10">
{{this.name}}
</div>
</div>
<div class="form-group" *ngIf="this.isTest" style="padding:10px;">
<label class="control-label col-sm-2">Display For:</label>
<div class="col-sm-10">
<p-listbox formControlName="names" [options]="names" [(ngModel)]="selectedName" [style]="{'width':'300px'}" [listStyle]="{'max-height':'100px'}" [multiple]="true" [checkbox]="true" [filter]="true" optionLabel="name">
<p-header>
Choose
</p-header>
</p-listbox>
</div>
</div>
<div class="form-group" *ngIf="this.isTest">
<p>Selected Names: <span *ngFor="let c of selectedName" style="margin-right: 10px">{{c.name}}</span></p>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">Start Date:</label>
<div class="col-sm-10">
<p-calendar formControlName="startDate" [showIcon]="true"></p-calendar>
<span style="margin-left:35px">{{startDate|date}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">End Date:</label>
<div class="col-sm-10">
<p-calendar formControlName="endDate" [showIcon]="true"></p-calendar>
<span style="margin-left:35px">{{endDate|date}}</span>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-2">Message:</label>
<div class="col-sm-10">
<textarea rows="5" formControlName="message" class="form-control" pInputTextArea ></textarea>
</div>
<div class="col-sm-3"></div>
</div>
<div>
<label class="control-label col-sm-4">
<button type="submit" class="btn btn-primary" > Submit </button>
</label>
</div>
</form>
</p-panel>
<p-panel >
<sampleList [sampleLi]="sampleLi"></sampleList>
</p-panel>
I am looking for bootstrap horizontal algnment like in this page Text
But the above one rendered in chrome is one below the other like
Name:
ABCTEST
In IE i am getting the sameone below the other label on top input button/date/text area below in vertical positioning.I dont understand what is wrong with my code.
My bootstrap is referenced in my angular.json file "src/assets/css/bootstrap.min.css". Inspect element in chrome is pointing to the bootstrap.min.css file.
Any inputs highly appreciated ?
Try this, it might not have worked for you because you didn't have the bootstrap embed with it.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Bootstrap Horizontal Form</title>
</head>
<body style="padding: 50px;">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Choose</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="option1" value="option1">
<label class="form-check-label" for="gridRadios1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="option2" value="option2">
<label class="form-check-label" for="gridRadios2">
Option 2
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="option3" value="option3">
<label class="form-check-label" for="gridRadios3">
Option 3
</label>
</div>
</div>
</div><br>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Select Names</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="name1">
<label class="form-check-label" for="name1">
Name 1
</label><br>
<input class="form-check-input" type="checkbox" id="name2">
<label class="form-check-label" for="name2">
Name 2
</label><br>
<input class="form-check-input" type="checkbox" id="name3">
<label class="form-check-label" for="name3">
Name 3
</label><br>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Start Date</label>
<input type="date" class="form-control" id="start-date" name="start-date">
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">End Date</label>
<input type="date" class="form-control" id="end-date" name="end-date">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="3" name="message" placeholder="Message"></textarea>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button style="width: 122.5%;" type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.
The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.
The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.
Attached is the code:
<form>
<div class="form-group row">
<label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">3</label>
</div>
<!-- Material inline 4 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">4</label>
</div>
<!-- Material inline 5 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">5</label>
</div>
<!-- Material inline 6 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">6</label>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="section" class="col-12 col-md-2 col-form-label">Section</label>
<div class="form-group row ">
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-3">
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="col-6 col-md-3">
<input type="time" class="form-control" id="time" placeholder="Time">
</div>
</div>
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
I can only suggest you read this page.
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.
For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
I suggest you start with the simpler solution as provided in the link.
A row with 2 columns. See where that gets you.
<div class="row">
<div class="col-sm">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
<div class="col-sm">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Number of Guests
</label>
</div>
<div class="col-md-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">6</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Section
</label>
</div>
<div class="col-md-10">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Date & Time
</label>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<input id="date" class="form-control" type="date">
</div>
<div class="col-6">
<input id="time" class="form-control" type="time">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</form>
I hope this was helpful, best of luck!
So there's a few things as to why these elements aren't aligning properly:
You should never use .row & .col in the same class, instead you should lay them out like so:
<form>
<div class="row">
<div class="col-md-4">
I am a column on the left (4/12)
</div>
<div class="col-md-10">
I am a column on the right (10/12)
</div>
</div>
</form>
Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-md-4">
I am inside of a larger column
</div>
<div class="col-md-10">
So am I!
</div>
</div>
</div>
</div>
It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.
I hope this helps clear a few things up, let me know if you're still a bit stuck.
try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="container-fluid">
<div class="row my-4">
<div class="col-md-2">
<label for="Number of Guests" class="col-form-label">Number of Guests</label>
</div>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline ml-3">
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio3">
<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio4">
<input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="section" class="col-form-label">Section</label>
</div>
<div class="col-md-10">
<div class="form-group ">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="dateandtime" class="col-form-label">Date and Time</label>
</div>
<div class="col-md-10">
<div class="form-group d-flex">
<input type="date" class="form-control col-md-3" id="date" placeholder="Date">
<input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
</div>
</div>
</div>
<div class="row my-4">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
How do I use bootstrap col and rows to make my text area span multiple rows in a form.
Here is a screenshot of what I mean.
I want the "Notes" text area to span across the two columns to the area that I have highlighted in yellow.
here is the code I have so far
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-4">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-4">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</form>
Basically all you need to do is add another container around your elements.
Try this snippet:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
<div class="form-row">
<div class="col-md-8">
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-6">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-6">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
You can make the element use 4 columns and make it float to the right, while making the left elements float to the left.
In the following Bootstrap Horizontal form if I want to add a caption right below Order label as <small class="text-muted">Must be at least 200</small> where do I place it? NOTE: Question is related to how to place a muted caption in small muted font right underneath a Bootstrap horizontal form's label. I know the role of placeholder attribute but in actual app I do need to place such a caption underneath a form's label.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
You can put wrap the <label> with a new div, move the col-sm-2 to that div and add the small element inside:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="email">Email:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="pwd">Password:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Open in Full page to see the actual result
I have a div which is "col-xs-8 col-xs-offset 2" that centers a form in the middle of the screen. Within this form I have two text areas and 4 radio buttons with corresponding text inputs for each. My problem is that while the text areas span the width of the container and resize appropriately when the window is resized, the inputs beside the radio button remain the same size until the browser is resized below their original length at which point they resize smaller. I would like these radio button text inputs to span in the same manner that the text areas do.
I hope this is clear enough.
<link rel="stylesheet" href="style.css">
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body class="container-fluid">
<div class="row">
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"</span></li>
<li>Create Quiz</li>
</ol>
<form method ="POST">
<div class="col-xs-8 col-xs-offset-2">
<fieldset class="form-group">
<legend class="text-center">
<label for="quiz_title" >Quiz Title:
</label>
</legend>
<div class="form-group">
<label for="question_text">Question</label>
<textarea class="form-control" id="explanation_text" rows="2"></textarea>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option1" value="radio_option1" required="required">
<label for="option1" class="form-check-label"> Answers: <a><span class="glyphicon glyphicon-pencil"></span></a>
<input class="form-control" type="text" id="option1" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option2" value="radio_option2" >
<label for="option2" class="form-check-label">
<input class="form-control" type="text" id="option2" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option3" value="radio_option3">
<label for="option3" class="form-check-label">
<input class="form-control" type="text" id="option3" required="required">
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="answer" id="option4" value="radio_option4">
<label for="option4" class="form-check-label">
<input class="form-control" type="text" maxlength="5" id="option4" required="required">
</label>
</div>
<div class="form-group">
<label for="explanation_text">Explanation</label>
<textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
</div>
</div>
</div>
</form>
</div>
</body>
Resizing Process:
Bootstrap has something called "Input Groups" that you might want to try. You can put the radio button next to a text input in an input group and the text input will fill up the remaining space. Look at some examples here: https://getbootstrap.com/components/#input-groups-checkboxes-radios
Here is something I put together using your code. Click on "Run code snippet" and then click "Full page" to see it in full page mode. Then you can resize the window to see how it will scale.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"</span></li>
<li>Create Quiz</li>
</ol>
<form method ="POST">
<div class="col-xs-8 col-xs-offset-2">
<fieldset class="form-group">
<legend class="text-center">
<label for="quiz_title">Quiz Title:</label>
</legend>
<div class="form-group">
<label for="question_text">Question</label>
<textarea class="form-control" id="explanation_text" rows="2"></textarea>
</div>
<label for="option1">Answers: <a><span class="glyphicon glyphicon-pencil"></span></a></label>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option1" value="radio_option1" required="required">
</span>
<input type="text" class="form-control" id="option1" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option2" value="radio_option2" required="required">
</span>
<input type="text" class="form-control" id="option2" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option3" value="radio_option3" required="required">
</span>
<input type="text" class="form-control" id="option3" required="required">
</div>
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon">
<input type="radio" name="answer" id="option4" value="radio_option4" required="required">
</span>
<input type="text" class="form-control" id="option4" required="required">
</div>
<div class="form-group">
<label for="explanation_text">Explanation</label>
<textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
</div>
</div>
</div>
</form>
</div>
</div>