Newbie to bootstrap.I followed the bootstrap 4 documentation to create a simple modal.
Bootstrap 4 modal
And created a modal with two parts - Part 1 and Part 2 separated by a <hr> tag.
I couldn't succeed in putting the two parts - Part 1 and Part 2 side by side.
Link to modal:
CodePen modal
Here is my sample modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</div>
<div class="modal-body">
<form>
<h4>Part 1</h4>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">Check me out <span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<hr>
<h4>Part 2</h4>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">Check me out <span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
Is there any article to refer to or any suggestions to proceed further?
Try this:
<form>
<div class="row">
<div class="col-6">first side</div>
<div class="col-6">second side</div>
</div>
<form>
And also you should change your modal width.
Related
I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.
The fiddle is here.
The code:
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.
d-flex and flex-column are already added to card-body.
I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.
Maybe you can use this code align-items-end in each group of form-group:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2 ">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OCQID">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
and the result:
You can use .align-items-baseline after using .flex row.
I am having a very strange occurrence when running this Modal as seen below:
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#reserveModal">
Read more »
</button>
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-inline" role="form" id="reservations">
<div class="form-group col-xs-12" style=" margin:10px">
<label for="guests" class="col-xs-3 control-label">
<h4>Number of Guests</h4></label>
<div class="checkbox col-xs-9" id="guests">
<label class="checkbox-inline margin:0 px">
<input type="radio" name="approve" value="">
<strong>1</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>2</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>3</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>4</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong> 5 </strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong> 6 </strong>
</label>
</div>
</div>
<div class="form-group col-xs-12" style=" margin:10px">
<label for="section" class="col-xs-3 control-label">
<h4>Section</h4></label>
<div class="section col-xs-9" id="section">
<input type="radio" name="section" value="" id="nonSmoking">
<label class="nonSmoking checkbox-inline" for="nonSmoking">
<strong>Non-Smoking</strong>
</label>
<input type="radio" name="section" value="" id="smoking">
<label class="smoking checkbox-inline" for="smoking">
<strong>Smoking</strong>
</label>
</div>
</div>
<div class="form-group col-xs-12" style=" margin:10px">
<label for="date time" class="col-xs-3 control-label text-align:right">
<h4>Date and Time</h4></label>
<div class="input-group add-on date datepicker form col-xs-3">
<input type="date" class="form-control date-picker" id="date" />
<div class="input-group-btn">
<button class="btn btn-default">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<div class="input-group form col-xs-2 col-xs-offset-1">
<input type="time" class="form-control" id="time" placeholder="Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="col-xs-12" margin:10px>
<button type="submit" class="btn btn-primary col-xs-offset-3">Reserve</button>
</div>
</form>
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
For context, I am going through a Coursera class and this is part of one of the assignments. I cannot figure out why the background does not cover the entirety of the modal - only covering the top line or so.
Here is the jsfiddle: https://jsfiddle.net/jacoblhughes/y55uyhfx/2/
Add clearfix class to <form class="form-inline" role="form" id="reservations">
Since you're using col-xs-12 on the form-group items, they're floated to the left, thus the parent form doesn't take on their height. So you need to apply the clearfix to it. If you don't know what clearfix is, I would suggest looking it up.
This is my angular controller:
app.controller("custctrl",["$scope","Restangular",function($scope,Restangular){
$scope.createcust=function(){
Restangular.all("customer").post($scope.cust);
console.log($scope.cust);
};
}]);
In the console I can find the object but the insertion failed and I get this error:
angular.js:10765 POST http://localhost:9000/customer 400 (Bad Request)
I'm using a modal and this is a part of my code:
<div id="inputModalCust" class="modal fade" ng-controller="custctrl" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><Strong><i class="fa fa-file"></i> Customer </Strong></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" >
<div class="form-group">
<label for="input" class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="cust.identity.companyName" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">logo</label>
<div class="col-md-10">
<input type="text" ng-model="cust.logo" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="text" ng-model="cust.linkset" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<input type="text" ng-model="cust.colorSet" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Website</label>
<div class="col-md-10">
<input type="text" ng-model="cust.webSite" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Category</label>
<div class="col-md-10">
<input type="text" ng-model="cust.category" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Time zone</label>
<div class="col-md-10">
<input type="text" ng-model="cust.timeZone" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default" ><i class="gi gi-remove_2"></i> <Strong>Close</Strong></button>
<button type="button" data-dismiss="modal" class="btn btn-primary" ng-click="createcust()"><i class="gi gi-floppy_saved" ></i><Strong> Save</Strong></button>
</div>
</div>
</div>
</div>
The problem is that I had a wrong field, timeZone is an int this is why I had to change the type here from text to number:
<div class="form-group">
<label for="input" class="col-md-2 control-label">Time zone</label>
<div class="col-md-10">
<input type="**number**" ng-model="cust.timeZone" class="form-control" placeholder="Value">
</div>
</div>
I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.