CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nitroman
nitroman

Reputation: 673

Problems with bootstrap columns in extra small devices

I am experiencing a problem on bootstrap columns on extra small devices. In extra small devices the bootstrap columns overflow and changes the alignment.

I am attaching screenshots from extra small device and other device.

Screenshot of extra small device: enter image description here

Screenshot of other device(working fine): enter image description here

Below code is the bootstrap code.

<!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.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="manu.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<div class="header row"> 
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>

<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>



  <div class="row frame">
    <div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">

            <div class="row questions">
                1. This is first one?        
            </div>

            <div class="row no-gutters choice_label_choice">            
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                A
                </div>
                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                First
                </div>

            </div>




            <div class="row no-gutters choice_label_choice">
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                B
                </div>

                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                    Second
                </div>
            </div>


            <div class="row no-gutters choice_label_choice">
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                    C
                </div>

                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                    Third
                </div>
            </div>

            <div class="row no-gutters choice_label_choice">
            <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                D
            </div>

            <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                Fourth
            </div>
            </div>      
      </div>    
    <div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
  </div>

    <div class="row status_bar">
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
    <div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1  time_bar"><div>Submit</div></div>
    </div>


</div>

</body>
</html>

The css code is given below.

.frame
{
    height: 70vh;
}

.question_wrapper
{
    height: inherit;
    background-color: beige;
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;

}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;

}

.logout
{
    color: white;
    text-align: right;
    padding-right: 20px;
    padding-top: 5px;

}

.question_status_wrapper
{
    height: inherit;
    background-color: bisque;
    overflow: auto;
}

.header
{
    height: 10vh;
    background-color: #333333;
    color: white;
}

.status_bar
{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20vh;
    background-color : #333333;
    display: flex;
}

.questions
{
    margin-top: 20px;
    margin-left: 20px;
}

.answer_choice_label_div
{
    background-color: black;
    color: white;
    text-align: center;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
}

.answer_choice_div
{
    background-color: white;
    color: black;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
    overflow: inherit;
}

.answer_choice_div:hover
{
    background-color: #C6FFF1;
    color: black;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
    overflow: inherit;
}

.choice_label_choice
{
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 10vh;
    height: 50px;
    vertical-align: middle;
}

.time_bar
{
    background-color: aliceblue;
    color: black;
    align-self: center;
    text-align: center;
    margin-left: 10px;
    min-height: 6vh;
    display: inline;
    vertical-align: middle;
    margin-right: 10px;
    padding-top: 7px;
}

I have checked the bootstrap grid and didn't find any problem. Please help.

Upvotes: 0

Views: 1347

Answers (2)

Allen
Allen

Reputation: 304

Use media queries , Paste this code in your style.css

@media only screen and (max-width: 580px) 
 {
  .answer_choice_div 
       {
        width: 83%;
            }
    .answer_choice_label_div
          {

           width: 10%;
          }
  }

Upvotes: 1

WP Learner
WP Learner

Reputation: 830

Use xs for extra small devices. sm for small devices and md for medium devices.

Follow this link for Grid Options

Grid Options - Bootstrap

Upvotes: 0

Related Questions