Reputation: 131
Here is simple contact form. Left side column display question that is "x1-question" and Right side is text field that User type answer.
I would like to controll Left side width size by changing like ...type class="col-sm-5" or sm- 4. but I couldn't adjust what I want width size and it become big slip and view become really ugly.
Could you teach me right col-xx-x code in Laravel form-group please?
Currently when I type long texst question Left side(question part) this is really narrow. i would like to it to more wide.
my Laravel Framework is 6.18.8
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="panel panel-default">
<div class="form-group{{ $errors->has('x1') ? ' has-error' : '' }}">
<p> {!! Form::label('x1', 'x1-question', ['class' => 'col-sm-2 control-label']) !!} </p>
<div class="col-sm-10">
{!! Form::text('x1', null, ['class' => 'form-control']) !!}
@if ($errors->has('x1'))
<span class="help-block">
<strong>{{ $errors->first('x1') }}</strong>
</span>
@endif
</div>
</div>
Upvotes: 0
Views: 2212
Reputation: 19692
You can use a total of 12 columns only, so if you are increase col-sm-2
to col-sm-4
, you need to decrease your sibling from col-sm-10
to col-sm-8
.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="panel panel-default">
<div class="form-group">
<p><label class="col-sm-4 control-label">x1-question</label></p>
<div class="col-sm-8">
<input type="text" class="form-control" value="x1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Upvotes: 1