This is my code I'm using, can anyone tell me how can I align my caterer and the dropdown menu. I got 5 screens some of them I manage to align but in this screen, I have no idea of how to do it.
<div class="row ">
<div class="col-md-12">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title">RESERVATION COMPLETION</h5>
</div>
<div class="card-body">
<form id="form" enctype="multipart/form-data">
<input type="hidden" id="Id" />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Category">Caterer</label>
<select class="form-control js-example-basic-single" id="data-packagetypes-caterercombo" style="width:200px;">
<option value="">Golden Crown</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ReservationNo">Reservation No</label>
<select class="form-control js-example-basic-single" id="data-reservationcompletion-combo" style="width:200px;" required>
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
<button type="submit" id="btnSubmit" class="btn btn-dark">Complete Reservation</button>
<button type="reset" id="btnClear" class="btn btn-dark">Clear</button>
</form>
</div>
</div>
</div>
</div>
In First Line Of code div class="row ". you Can Add align="center" Like This
<div class="row " align="center">
See Example
Related
I have this .cshtml page where I am just adding in a functionality. Based on a radio button selection the cards should collapse. So basically if Existing user selected then collapseone opens, if New user selected collapsetwo opens. I even want to see how can i align both the cards horizontally. Let me add snippets & images.
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
Some snaps:
current output:
Expected output:
Collapsing based on the radio button selection. Thanks for your help !!
You can try to add <div class="col-sm-6"> separately outside card1 and card2 so that you can align both the cards horizontally.And you can use js to open collapses.Here is a demo:
html:
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked onchange="show(this)">
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1" onchange="show(this)">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse show" id="collapse1">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-sm-6">
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse" id="collapse2">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
js:
<script>
function show(radio) {
if ($(radio).is(':checked')) {
if ($(radio).attr("id") == "radioPrimary1") {
$("#collapse1").addClass("show");
$("#collapse2").removeClass("show");
} else {
$("#collapse1").removeClass("show");
$("#collapse2").addClass("show");
}
}
}
</script>
result:
I'm using bootstrap from getbootstrap.com. I want to have a space between the SAVE and CLEAR button. I also want them to align center to be proportioned on the textboxes. How can I achieve that?
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
<input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
</form>
may be you are looking for this class="text-center" will do a trick, and some CSS for spacing
.btn-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group btn-block text-center">
<input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
<input type="reset" class="btn-default btn-lg btn-spacing col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
For the last form-group class rename it to form-group1 and in the CSS put this. .form-group {text-align:center;}. Also, if you want space between those two buttons, do this. .btn-primary btn-lg col-sm-4 {margin:10px;}
here is an example. jsFiddle
To add space between clear and submit button you can add below CSS.
.form-group .btn-primary {
margin-right:10px;
}
I am facing this issue again with the alignment which I am unable to rectify. I don't know what I am missing out. Please find the plunkr [https://plnkr.co/edit/UD0YZQhgOjIoJ1nqg7sb?p=preview] .Please maximise the plunkr output for the actual output I am getting. Any help people?
Html code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container" style="margin-top:60px">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<p>{{ error }}</p>
</div>
<!--<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>-->
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label for="title" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-4">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-5 control-label">Status</label>
<div class="col-sm-4">
Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status"> In-Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date</label>
<div class="col-sm-4">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-4">
<span data-ng-hide="editMode">
<input type="submit" value="Generate" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
you can see the alignment issue here in this image below
To make the date input span the whole width, you need the .form-control class on it.
<input name="startDate" data-ng-model="user.date" id="startDate" class="form-control date-picker" required />
Also note that the <input> tag must have a type attribute with it.
You have a container within a container for your timesheet div. Removing the .container class from the timesheet div fixes the alignment issue.
Also, put the <table> in a row and a column:
<div class="row">
<div class="col-md-12">
<!-- Your table here -->
<table class="table table-hover">
...
</table>
</div>
</div>
See it working here.
I want to display the search button on the right of input text but it shows up below it. How can I show it on the right? Fiddle.
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
the button actually will not be inside the input field
you can just add margin-right:-10px fro the search button
find clean and working fiddel :here
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget" style="float:left; margin-right: 10px">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
Add style="float:left; margin-right: 10px"
I have a responsible site but as you can see by the pictures (http://postimg.org/image/xoq7eyg1b/), it's not totally mobile-friendly because the components are shown kind of small.
To avoid the need to resize each one of them explicitly, is there any way to enlarge everything at once?
Code of the printed page:
<div class='row' id='content-wrapper'>
<div class='col-xs-12'>
<div class='page-header'>
<h1 class='pull-left'><i class='icon-stethoscope'></i> Doenças Crônicas</h1>
</div>
</div>
</div>
<div id="divGrid">
<div class='col-sm-12 col-md-3'>
<div style="width:101% !important" class="box">
<div class="box-header box-header-small dark-orange-background">
<div class="title">
<div class="icon-search"></div>
Pesquisa
</div>
<div class='actions'>
<a class="btn box-collapse btn-xs btn-link" href="#"><i></i></a>
</div>
</div>
<div class="box-content">
<form class="form form-horizontal" method="post" action="#" accept-charset="UTF-8">
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="nome">Nome</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="nome" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Nome" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Email">E-mail</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="Email" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Email" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Sexo">Sexo</label>
<div class="col-md-8">
<select id="Sexo" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.Sexo, ">
<option value="">-- Todos --</option>
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="IsMonitorado">Monitorado</label>
<div class="col-md-8">
<select id="IsMonitorado" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.IsMonitorado, ">
<option value="">-- Todos --</option>
<option value="1">Sim</option>
<option value="0">Não</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="FaixaIdade">Faixa Idade</label>
<div class="col-md-8">
<select id="FaixaIdade" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.FaixaIdade, ">
<option value="">-- Todos --</option>
<option value="1">0 a 18 anos</option>
<option value="2">19 a 23 anos</option>
<option value="3">24 a 28 anos</option>
<option value="4">29 a 33 anos</option>
<option value="5">34 a 38 anos</option>
<option value="6">39 a 43 anos</option>
<option value="7">44 a 48 anos</option>
<option value="8">49 a 53 anos</option>
<option value="9">54 a 58 anos</option>
<option value="10">59 anos ou mais</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label " style="text-align: left;" for="situacao">Situação</label>
<div class="col-md-8">
<select id="situacao" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.StAtivo, ">
<option value="">-- Todos --</option>
<option value="1">Ativo</option>
<option value="0">Inativo</option>
</select>
</div>
</div>
<div class="form-actions form-actions-padding-xs">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-sm" type="button" data-bind="click: limpar">Limpar</button>
<button class="btn btn-primary btn-sm" type="button" data-bind="click: submit"><i class="icon-search"></i> Pesquisar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-sm-12 col-md-9'>
<div style="width:101% !important" data-bind="kendoGrid: model.items"></div>
</div>
</div>
<div class="modal fade" id="NovoPaciente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header blue-background">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-white" id="myModalLabel"><i class="icon-user"></i> NOVO PACIENTE</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nome/Identificação*</label>
<input class='form-control' type='text' data-bind="value: model.Nome, valueUpdate:'afterkeydown'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Endereço*</label>
<textarea class='form-control' rows='2' data-bind="value: model.Endereco"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Telefone</label>
<input class='form-control' type="text" data-bind="masked: model.Telefone, mask: '(99) 9999-9999'" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Sexo*</label>
<select class="form-control" data-bind="options: model.ComboSexo, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '-- Selecione --', value: model.Sexo, "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nascimento*</label>
<div class="form-group">
<input class="form-control" id="txtDtNascimento" type="text" data-bind="value: model.DtNascimento, datepicker: model.DtNascimento, datepickerOptions: { altFormat: 'dd/mm/yyyy' } " />
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Unidade*</label>
<select id="tipoDocumento" class="form-control" data-bind="click: function(e) { obterEquipesUnidade(this) }, options: model.ComboUnidade, optionsText: 'Text', optionsValue: 'Value', value: model.IdUnidade, optionsCaption: '-- Selecione --', "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Equipe</label>
<select class="form-control" data-bind="options: model.comboEquipe, optionsText: 'Descricao', optionsValue: 'Id', optionsCaption: '-- Selecione --', value: model.IdEquipe, "></select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Assinatura do TCLE</label>
<br />
<label>
<input type="radio" name="Tcle" value="true" data-bind="checkedRadioToBool: model.Tcle" />
Sim
</label>
<label>
<input type="radio" name="Tcle" value="false" data-bind="checkedRadioToBool: model.Tcle" />
Não
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Altura</label>
<input class='form-control' type='text' id="Altura" data-bind="value: model.Altura, masked: model.Altura, mask: '0.00'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Chave de acesso</label>
<input class='form-control' type="text" data-bind="numeric: number, value: model.ChaveAcesso" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>E-mail<span data-bind="text: model.Obrigatorio"></span></label>
<input class="form-control" type="email" data-bind="value: model.Email" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Outras Informações</label>
<textarea class='form-control' rows='2' data-bind="value: model.Observacao"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Senha<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.Senha" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Confirmação<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.ConfirmSenha" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bind="click: cancel">Fechar</button>
<button type="button" class="btn btn-primary" data-bind="click: save">Salvar</button>
</div>
</div>
</div>
</div>
Try increasing the font-size in the <body>.
#media screen (max-device-width:$mobile-breakpoint) {
body {
font-size:120%;
}
}
Also, you could use em units instead of pixels (I don't know if you do because you didn't post your CSS). These em units are always relative to the font-size set on the <body> tag. You can use media queries to increase or decrease the size of one em unit depending on the viewport.
Good em reference: https://css-tricks.com/css-font-size/
In Bootstrap, the font sizes are given in em units, so you can set a baseline font size in your CSS, and all of the font should scale accordingly.
Create a new CSS page, so you're not editing bootstrap.css directly.
Call it custom.css. It should contain:
html { font-size: 16px; }
Add a reference to custom.css below the references to bootstrap, something like this (you don't show that part of your code so I'm just guessing here):
<link rel="stylesheet" href="/path/to/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/css/bootstrap-theme.css"/>
<link rel="stylesheet" href="/path/to/css/custom.css"/>
The code in custom.css should overwrite whatever baseline font gets set initially. If setting the css for html doesn't work, try body.