I'm attempting to create a border around multiple fields using HTML and CSS. I've tried placing <p> tags around my <form> tags, but it's not achieving the desired effect. Additionally, using <div> tags seems to be complicating things.
Does anyone know how I can simply add a black border around these 9 fields? I'm also using Angular and would appreciate any tips on creating a more polished look. I'm currently an intern at this new company and want to deliver outstanding work.
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 960px;
border:1px solid black;
margin: auto;
padding: 10px;
background: #ffffff
}
</style>
<form class="form " role="form" >
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Ship To #</label>
<input type="text" class="form-control" ng- model="shipToNumber" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Ship To Mnemonic</label>
<input type="text" class="form-control" ng-model="shipToMnemonic" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Ship To Name</label>
<input type="text" class="form-control" ng-model="shipToName" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Customer Order #</label>
<input type="text" class="form-control" ng-model="customerOrderNumber" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Load #</label>
<input type="text" class="form-control" ng-model="loadNumber" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Car Initials</label>
<input type="text" class="form-control" ng-model="carInitials" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Car #</label>
<input type="text" class="form-control" ng-model="carNumber" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Waybill #</label>
<input type="text" class="form-control" ng-model="waybill" />
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label>Carrier Name</label>
<input type="text" class="form-control" ng-model="carrierName" />
</div>
</div>
</div>
</div>
</form>
</head>
</html>