CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Cody Jones
Cody Jones

Reputation: 434

Position bootstrap rows for small devices

I'm trying to position my bootstrap rows for small devices but I'm running into an issue with my rows.

They are touching the edge of the screen and it looks really ugly, and I tried to offset it with col-ex-off-2 but now that is not only not helping at all, but its messing up the screen medium and large screens.

Also, I can add any margin to the rows either and its making the text boxes look super ugly because they are touching.

Here is a link to the bootply replicating this issue. Notice the text boxes are touching each other and it looks bad. Also they are not side by side like I would prefer.

http://www.bootply.com/Ko7Ky3nj0M

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  html,body {
  height:100vh;  
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 00px;
  }

  h1 {
  font-size:50px;
  }

  .checkbox-margin
  {
  margin-left:30%;
  }

 .subtitle
{
    display:block;
    text-align:right;
    border-top: 7px solid #ffffff;
    color:white;
    font-size:40px;
}

.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}

  .content
  {
  min-height:90vh;
  margin-top:5vh;
  margin-bottom:5vh;
  border-radius:15px;
  box-shadow: 1px 1px 20px #000000;
  margin-right:15px;
  }

   .stylebox
  {
  border-top-right-radius:15px;
  border-bottom-left-radius:15px;
  background-color:#FFFFFF;
  color:#CC3611;
  margin-top:5%;
  margin-bottom:7%;
  }

 .full
 {
 min-height:100vh;
 }

 .textarea p
 {
 font-size:20px;
 font-weight:bold;

 }

  .textarea h3
 {
 font-weight:bold;
 }

.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}

 .form-margin
{
margin-bottom:2%;
}


@media screen and (max-width: 992px) {

.container .col-xs-12 {
margin:0px;
padding:0px;
}

 .col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}

.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}

h1 {
padding:0px;
}

}


  </style>
</head>
<body>
        <div class="container full">
            <div class="row full">
                <div class="col-xs-0 col-md-2">
                </div>
                <div class="col-xs-12 col-md-8 content">
                    <div class='divarea'>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>

                    <div class='row form-margin'>


                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input placeholder='Test' type="text" class="form-control" id="usr">
                        </div>

                        <div class='col-xs-8 col-xs-offset-2 col-md-6'>
                        <input  placeholder='Test' type="text" class="form-control" id="usr">
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-xs-0 col-md-2"></div>
            </div>
        </div>  

</body>

</html>

Upvotes: 2

Views: 174

Answers (1)

del cueto
del cueto

Reputation: 111

You need to change the way that you are using your forms, there is no need to add custom css, if you wrap each pair of elements in a "input-group" class, you can apply other classes that separates the information nicely. If you check the Bootsrap input group documentation here you can get some examples on form elements. You can solve you current problem by adding an empty element , such as a label, with the class m-b-1 (margin-bottom-1rem). Note that this is a hotfix and would not recommend it otherwise.

<div class="row form-margin">


    <div class="col-xs-8 col-xs-offset-2 col-md-6 ">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>

    <div class="col-xs-8 col-xs-offset-2 col-md-6">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>
</div>

Upvotes: 0

Related Questions