My plan was to organize 4 input text boxes in 4 equal columns on a single row of the form. Using Bootstrap's grid column classes, I set col--3 for medium and large screens for those four inputs. For small and extra-small sizes, I designated them as col--12 so that each input occupies its own row. However, my supervisor wanted these input boxes to be smaller. To accommodate this, I added an offset class to the inputs and reduced their column span to 6 columns, ensuring they were centered correctly.
This adjustment unfortunately affected the layout on small screens, resulting in only two inputs per row with the other two on a separate row.
/* adjusting buttons*/
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* making square elements*/
.square-elem {
border-radius: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<form id="registration-form" class="">
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
<a href="#" role="button" class="btn btn-danger btn-download form-control square-elem" value=""> DOWNLOAD EBOOK </a>
</div>
</div>
</div>
<!-- </div>
-->
</form>
</body>For reference, here is the JSFiddle(Drag the frame) where you can see the issue clearly. The desired output should have all four inputs aligned side by side in one row. What could be causing this unexpected behavior?