I cant get the control label to line up checkbox input. Its even worse on mobile. I want the text to line up. What am I doing wrong? I thought a div was missing or something but it works fine with any other input. I tried adjusting margins with css but now working either. Any help would be appreciated. Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><!--?php echo lang('login_forgot_password');?--></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
You can add some CSS styling to control the position of .checkbox-inline
The media query will move the checkbox for smaller screens.
Also note I added the class .form-small to your last .form-group to control the position of the checkbox on smaller screens.
.checkbox-inline {
top: -7px;
}
#media only screen and (max-width: 991px) {
.checkbox-inline {
top: -40px;
right: -115px;
}
.form-small {
margin-bottom: 0 !important;
max-height: 20px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
form .line {
margin-bottom: 5px;
}
p{
margin-top: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Login</legend>
<!-- Text input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="identity">Username</label>
<div class="col-md-4">
<input id="identity" name="identity" type="text" placeholder="Enter Username" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group line">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group form-small">
<label class="col-md-4 control-label" for="remember">Remember Me</label>
<div class="col-md-4">
<label class="checkbox-inline" for="remember">
<input type="checkbox" name="remember" id="remember" value="1">
</label>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Login</button>
<p><!--?php echo lang('login_forgot_password');?--></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div></div>
<div id="push"></div>
Related
I have a form, in that n number of form fields available. only For 2 inputs, I want to share a common button without affecting remaining layout, but it's not aligned properly as common.
Here is what I tried. First two input fields should have common button
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
I assume that you want to center the button for two input elements. Is that so you can try display:table for the .row this might have fix your issue.
.row {
display: table;
width: 100%;
}
.row .col{
display: table-cell;
}
.col1 {
width: 40%;
}
.col2 {
position: relative;
vertical-align: top;
}
.col2 button {
position: absolute;
top: 30px;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col col1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col col2">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
</div>
</body>
</html>
However if you want to increase the size for the button you can always add padding or set height for the button.
Codepen link
Pure bootstrap 4 impementation wll be the one below.
You have to group the two inputs into one single .col and the button to an another .col with flex-grow-0 flex-shrink-1 mb-3 d-flex to shrink the container to the minimum of button width and to have sufficient margin at bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
</div>
col-auto in bootrap 4.0.0 does not have padding. And there may be some other bugs too. You should better use the latest version of bootstrap 4. it is version 4.6.0
Use two .row. The first .row for the first two inputs and the button and the second .row for the rest of the inputs.
Use .col-auto and .d-flex for the column that contains the button to make it take as much space at it need and full height
Use .mb-3 for the button since the .form-group has that much margin-bottom.
You may use .btn-outline-secondary instead of .btn-secondary
<div class="col-auto d-flex ">
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col-auto d-flex">
<button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
🎁
Doing so you avoid multiple nesting of .row and .col.
here is another approach, also rethinking the structure with only BS class for the styling
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col ">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="form-group row pl-3">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
Problem
I am expecting to showing two columns. But all the four fields are coming in 1 column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label for="First_Name" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
<div class="form-group">
<label for="Last_Name" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
This should work.
Adding a row div just before the two form fields you are expecting in the same column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="FirstName" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="LastName" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Wrap it in a div with class "row", this will take all the width avaible
<div class="row">
<div class="col-sm-6 col-md-6">...</div>
<div class="col-sm-6 col-md-6">...</div>
</div>
Bootstrap container has two forms horizontally.
Hovering over Form1 will increase the width and decreases the width of form2.
but reverse is not happening. Any suggestions please.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#row{
background-color: lightblue;
border-style: groove;
}
#form1{
background-color: lightgreen;
width: 50%;
transition: width 0.75s ease;
}
#form1:hover{
width: 75%;
}
#form1:hover + #form2{
width: 25%
}
#form2{
background-color: orange;
width: 50%;
transition: width 0.75s ease;
}
#form2:hover{
width: 75%;
}
#form2:hover ~ #form1{
width: 25%
}
</style>
</head>
<body>
<div class="container" >
<div id="row" class="row" >
<div id="form1" class="col-sm-6">
<!-- form1 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<div id="form2" class="col-sm-6">
<!-- form 2 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Please see the below image. When hovering on Green form, form goes left to right ,Orange form decreases the width and Green form increases the width but this is not happening while hovering on Orange form(Reverse direction).
Basically I'm trying to achieve form like THIS
You can do this with flexbox. As Selva has mentioned, CSS can only select the next sibling, not the previous. However, with flexbox this is much easier:
.flexible{display: flex; flex-direction: row;}
#form1:hover{
width: 100%;
}
#form2:hover{
width: 100%;
}
https://jsfiddle.net/2g4krj0f/
The solution with pure CSS exists. You need to define css-rule for selector which selects form1 when this form is unhovered while row is hovered: #row:hover > #form1:not(:hover)
#row:hover > #form1:not(:hover){
width: 25%;
}
http://www.codeply.com/go/0Q2gFDoc4y
look at snippet (for some reason it works in full screen mode):
#row{
background-color: lightblue;
border-style: groove;
}
#form1{
background-color: lightgreen;
width: 50%;
transition: width 0.75s ease;
}
#form1:hover{
width: 75%;
}
#form1:hover + #form2{
width: 25%
}
#form2{
background-color: orange;
width: 50%;
transition: width 0.75s ease;
}
#form2:hover{
width: 75%;
}
#row:hover > #form1:not(:hover){
width: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" >
<div id="row" class="row" >
<div id="form1" class="col-xs-6">
<!-- form1 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="email">Email:</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="pwd">Password:</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<div id="form2" class="col-xs-6">
<!-- form 2 -->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="email">Email:</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="pwd">Password:</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
I use form-groups in a well element, but
the bottom visible margin is more than the top, and this is not looking good. I want it to be centrelised vertically.
<div class="well">
<div class="form-horizontal">
<div class="form-group">
....
<div class="form-group">
....
</div>
</div>
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
The .form-group's last child has a margin-bottom, which can be removed by setting this:
.form-horizontal .form-group:last-child {margin-bottom: 0;}
.form-horizontal .form-group:last-child {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
Preview
div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id=""> Email:</label>
<label class="Control-label col-sm-4" id=""> Username:</label>
<label class="Control-label col-sm-4" id=""> Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
and my CSS code is :
.form-control{
width: 150px;
}
h1{
color:red;
}
Good Day mate, i am just confuse if im doing right or not. i want to resize the input on my website which defined as class "form-control" but when i do the css above nothing changes. can someone help me if my selector or wrong or my codes is? thank you
P.S the test below is just a xample if the css is being link in my editor and yes the color red is being executed
The more specific the selector, the more precedence it has. For example :
.mydiv .myclass {
background-color: blue;
}
.myclass {
background-color: red;
}
Even tho the red background is defined after the blue one, the first one is more specific in the class that it is applied to, and in case you have the following code, the blue background will be applied :
<div class="mydiv">
<div class="myclass">
</div>
</div>
So what you want to do in your case, and this is the most basic but still the better solution, is to add a class to your form in order to be able to specify the width of the form-control elements for this form :
<form class="form-inline cool-form">
<div class="well">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
</div>
</form>
And then specify the width in your css :
.cool-form .form-control {
width: 250px;
}
try this:
note: and you are missing to close your first div i.e <div class="container">
.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id="">Email:</label>
<label class="Control-label col-sm-4" id="">Username:</label>
<label class="Control-label col-sm-4" id="">Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
You are using Bootstrap and form-control class is used from Bootstrap CSS.
Use (Easy way)
.form-control{
width: 150px !important;
}
to override your code over Bootstrap CSS
The best practice -
In your case the class is .form-control (Bootstrap class)
To overcome this is to define new class and add new changes to your own class.
.form-control-override{
width: 150px;
}
and use this form-control-override in your HTML code instead of form-control