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>
Related
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to move my "Seller" container right below my "Corporation Store" container. I added a visual presentation.
I tried using clear:bothand clear:left; however, it was messing the other containers: "Customer" and "Product".
So, I tried putting the "Seller" container into a new row and tried using clear:both to put the "Seller" container below "Corporation" container.
Because the "Customer" container is big, it creates a huge gap between "Seller" and "Corporation" containers. Is there a way I can fix this problem or approach this problem different?
Thank you
jsfiddle
I achieved what your end result by wrapping both "Corporation Store" and "Seller ID" in their own "col-xs-3" container and then stripping them of that same class.
<!DOCTYPE html>
<html>
<head>
<title>Corp Simulator</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/sweetalert2.min.css">
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default">
<!-- container -->
<div class="container">
<!-- header -->
<div class="navbar-header">
<div class="col-xs-12 navbar-header-padding">
<span class="col-xs-3"><img src="../img/corp-logo-flat.png"/></span>
<span class="col-xs-9"><a class="navbar-brand">Corp Simulator</a><a type="button" data-toggle="modal" data-target="#buildModal" class="label label-default pull-right ">Build</a></span>
</div>
</div>
</div>
</nav>
<!-- begin content -->
<div class="col-sm-12">
<div class="col-xs-8">
<!-- corporation -->
<div class="col-xs-12">
<h2>Corporation</h2>
<!-- begin form -->
<form id="cForm">
<!-- begin row -->
<div class="row">
<div class="col-xs-3">
<!-- corporation store -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Corporation Store</div>
<div class="panel-body">
<div class="col-xs-12 no-left-right-padding">
<div class="col-xs-6 no-right-padding">
<div class="form-group">
<label for="corpId">Corporation ID #</label>
<input type="text" class="form-control" tabindex="1" name="corpId" id="corpId" schoolId="corpId">
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="datetime-local" class="form-control" tabindex="2" name="startDate" id="startDate" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endTime">End Time</label>
<input type="datetime-local" class="form-control" tabindex="3" name="endTime" id="endTime" placeholder="End Time">
</div>
</div>
</div>
</div>
<!-- seller info -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Seller ID</div>
<div class="panel-body">
<div class="form-group">
<label for="sellerId">SE ID</label>
<input type="text" class="form-control" tabindex="4" name="sellerId" id="sellerId" placeholder="SE ID">
</div>
<div class="form-group">
<label for="seFirstName">SE First Name</label>
<input type="text" class="form-control" tabindex="5" name="seFirstName" id="seFirstName" placeholder="SE First Name">
</div>
<div class="form-group">
<label for="seLastName">SE Last Name</label>
<input type="text" class="form-control" tabindex="6" name="seLastName" id="seLastName" placeholder="SE Last Name">
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!--customer -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Customer</div>
<div class="panel-body">
<div class="col-xs-6">
<div class="form-group">
<label for="customerId">Customer ID</label>
<input type="text" class="form-control" tabindex="7" name="customerId" id="customerId" placeholder="Customer ID">
</div>
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" tabindex="9" name="companyName" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="customerFirstName">First Name</label>
<input type="text" class="form-control" tabindex="11" name="customerFirstName" id="customerFirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="customerAddress1">Address 1</label>
<input type="text" class="form-control" tabindex="13" name="customerAddress1" id="customerAddress1" placeholder="Address 1">
</div>
<div class="form-group">
<label for="customerCity">City</label>
<input type="text" class="form-control" tabindex="15" name="customerCity" id="customerCity" placeholder="City">
</div>
<div class="form-group">
<label for="customerPostalCode">Postal Code</label>
<input type="text" class="form-control" tabindex="17" name="customerPostalCode" id="customerPostalCode" placeholder="Postal Code">
</div>
<div class="form-group">
<label for="customerPhone1">Phone 1</label>
<input type="text" class="form-control" tabindex="19" name="customerPhone1" id="customerPhone1" placeholder="Phone 1">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="relationshipType">Relationship</label>
<input type="text" class="form-control" tabindex="8" name="relationship" id="relationship" placeholder="Relationship">
</div>
<div class="form-group">
<label for="nationalId">National Identifier</label>
<input type="text" class="form-control" tabindex="10" name="nationalId" id="nationalId" placeholder="National ID">
</div>
<div class="form-group">
<label for="customerLastName">Last Name</label>
<input type="text" class="form-control" tabindex="12" name="customerLastName" id="customerLastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="customerAddress2">Address 2</label>
<input type="text" class="form-control" tabindex="14" name="customerAddress2" id="customerAddress2" placeholder="Address 2">
</div>
<div class="form-group">
<label for="customerState">State/Province</label>
<input type="text" class="form-control" tabindex="16" name="customerState" id="customerState" placeholder="State/Province">
</div>
<div class="form-group">
<label for="customerCountryCode">Country Code</label>
<input type="text" class="form-control" tabindex="18" name="customerCountryCode" id="customerCountryCode" placeholder="Country Code">
</div>
<div class="form-group">
<label for="customerPhone2">Phone 2</label>
<input type="text" class="form-control" tabindex="20" name="customerPhone2" id="customerPhone2" placeholder="Phone 2">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="customerEmail">Email</label>
<input type="email" class="form-control" tabindex="22" name="customerEmail" id="customerEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
<!-- product -->
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Product</div>
<div class="panel-body">
<div class="form-group">
<label for="prodId">Product ID</label>
<input type="text" class="form-control" tabindex="23" name="prodId" id="prodId" placeholder="PRODUCT ID">
</div>
<div class="form-group">
<label for="modelYear">Year</label>
<input type="text" class="form-control" tabindex="24" name="modelYear" id="modelYear" placeholder="Year">
</div>
<div class="form-group">
<label for="model">Model</label>
<input type="text" class="form-control" tabindex="25" name="model" id="model" placeholder="Model">
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</form>
<!-- end form -->
</div>
</div>
</div>
</body>
</html>
The snippet is limited in its view, but you will see the layout you wanted to achieve.
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.
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>
I would like to group the radio button and bootstrap select but they're not inline.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"><span class="input-group-addon"> Preset Size (<b>inch</b>):
</span></label>
<div class="col-md-6">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div> <!-- Radio + Dropdown -->
</form>
</div> <!-- container -->
and I also want to group 2 text boxes together with the label to create user input.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-sm-4">
<label> x </label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</form>
</div>
Here's the output screenshot.
You may need to re-arrange your code a bit to fit bootstrap's use.
Firstly, use .form-group - also put element in rows when possible.
Something along the lines of:
ps you may have to adjust this a bit but it should give you a good place to start from
.form-inline input.form-control {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-6">
<input name="radioGroup" id="radio1" value="option1" type="radio" />Preset Size (<b>inch</b>):
</label>
<div class="col-xs-5">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36”x84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-5">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio">Custom Size:
</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-xs-1">
<label>x</label>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</form>
</div>
You forgot the row div. whenever you are using bootstrap layout with columns- you need to nest the columns div inside a row div:
<div class="row">
<div class="col-sm-4"> first third</div>
<div class="col-sm-4"> second third</div>
<div class="col-sm-4"> third third</div>
</div>
Read the bootstrap doc for more information
Here are two ways you can do this depending on if you want all the elements in one row or not. It's just utilizing input-groups and not much else.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>