Hi how will I reduce the distance of the two dropdowns between each other?
Here is the code:
<div class="row">
<p class="col-md-offset-1"><b>Type of Meal:</b></p>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
</div>
Thanks!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Starfleet officer</p>
<form class="form-inline">
<select class="form-control form-group">
<option>Spock</option>
<option>Kirk</option>
</select>
<select class="form-control form-group">
<option>Picard</option>
<option>Riker</option>
</select>
</form>
</div>
<div class="col-md-8">
</div>
</div>
</div>
Related
I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
I want to move 2 rows at the right of the page so everything will be in right order, 2 rows on the left, button in the middle and 2 rows at the right! I will post an image and my source code!
Project Image
My source code using bootsrap 5:
function Converter () {
return (
<div className="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Have:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" class="form-control"/>
</div>
</div>
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Want:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >EUR</option>
<option value="2">USA</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" className="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary mb-2">Convert</button>
</form>
</div>
);
}
you can use like this
<div class="row">
<div class="col-md-5">
<div class="row">
code for first drop downs
</div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
code for Second list of drop downs
</div>
</div>
Try this and fill your code snippets:
<div class="container">
<div class="row align-items-center justify-content-evenly">
<div class="col-md-5 text-start">
<!-- First drop down -->
</div>
<div class="col-md-2 text-center">
<!-- Button -->
</div>
<div class="col-md-5 text-end">
<!-- Second drop down -->
</div>
</div>
</div>
I'm trying to make a search bar for an ebay-type website, but for some reason, the submit button takes the column size of the previous asset, and also goes directly under this asset.
CODE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</body>
You forgot to close <select>. You can reduce border-radius of input to get it more closer like ebay.
.NoPadding{
padding:0 !important;
}
input,select{
border-radius:1px !important
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-3 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</select>
</div>
<!-- BUTTON -->
<div class="col-sm-2 frm-group ">
<input type="submit" class="form-control btn-primary">
</div>
</form>
</div>
</body>
You simply didn't close select and div.form-group
Also, I would suggest adding col-md-#, where # is a number.
See here for the closed tags: https://jsfiddle.net/8z7cL5x0/
Try wrapping your columns in a div with class "row":
<body>
<div class="container">
<div class = "row">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</div>
</body>
I want to achieve something like this: , I'm trying to make it work for several hours but couldn't do so,Here is my Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-7">
<h5>Land Area</h5></div>
<div class="col-xs-3">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions to make it work ?
Try this:
https://jsfiddle.net/2bz3jpad/2/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-6 text-right">
<h5><strong>Land Area:</strong></h5></div>
<div class="col-xs-3 text-left">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Narrow your label's column and float the text to the right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-2">
<h5 class="pull-right">Land Area</h5></div>
<div class="col-xs-7">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
</div>
</div>
</div>
EDIT
Or use an inline form:
http://getbootstrap.com/css/#forms-inline
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.