I intend to line up 4 input text boxes housed in 4 equal sized columns in one row of the form. Making use of Bootstrap's grid column classes, I assigned col--3 for medium and large screen sizes to those four input divs. Likewise for small and extra small sizes, I assigned them col--12 so that the inputs occupy their own whole row. Then my guide wanted those input boxes sizes reduced. I added offset class to the four input and reduced their column span to 6 columns. These were centered appropriately.
However, this change screwed up my small screen layout. Now there are only two inputs in each row, while the other two in the next row.
/* button modification*/
#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;
}
/* square boxes*/
.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>Here's the JSFiddle(Drag the frame) too. It seems the inputs(in each form group div) have completely positioned outside their bounding div box.The intended output should be the four inputs lined side by side in one row. What can possibly be the issue here?
.col-md-3and 3 from.col-md-offset-3. There are twelve columns in a row. You have a total of 24, so it makes sense that some would reflow below the others.