Mahtab Alam Mahtab Alam - 4 months ago 16
HTML Question

Adjusting bootsrap rows for mobile screen

I'm using bootstrap to style the page, using standard bootstrap classes like container, row, col-sm-offset-n (to get appropriate spacing). But some of the components look very bad on mobile screen.

I have following bootstrap components on my page

container
|------row
|-----bootstrap panel
|------row
|-----div which holds error messages
|------row
|-----a form having a textarea and a button
|------row
|-----span tag


The website looks good on large screen but on smaller screen the textarea within the form gets to the leftmost side of the mobile screen. I want it to be shown in the middle. Similarly the last span tag gets attached to the leftmost side of the mobile screen. I want it to be shown in the middle.

Here is what is looks like on bigger and smaller screens respectively.

Larger Screens

Larger Screens

Smaller Screens

Smaller Screens

You can see the problem here screen size

Below is the markup I used

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="icon" href="/images/favicon.png" type="image/x-icon">
<title>Say your heart out ...</title>
<!--<meta name='viewport' content='user-scalable=no'>-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<link rel="stylesheet" href="/libs/css/toaster.min.css"/>

<script src="/libs/js/jquery.min.js" type="text/javascript"></script>
<script src="/libs/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
<script src="/libs/js/spin.min.js" type="text/javascript"></script>
<script src="/libs/js/angular-spinner.min.js" type="text/javascript"></script>
</head>

<body ng-app="mean" ng-controller="MainCtrl">


<toaster-container></toaster-container>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-md-7">

<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-envelope"></span>
<span><b>So what you wanna do before you die ...</b></span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span><a href="/"><span class="glyphicon glyphicon-refresh"></span>Load messages</a></span>
</div>
<div class="panel-body" >
<div ng-cloak class="row">
<div class="spinner" ng-show="formModel.loadingData">
<span us-spinner></span>
<br/><br/><br/><br/><br/>
<p style="text-align:center">Loading Awesomeness ... </p>
</div>

<div class="col-xs-12">
<ul class="demo1">

<li class="news-item" ng-repeat="item in records" on-last-element>
<table>
<tr>
<td>
<img height="60" ng-src="/images/{{($index+11) % 10}}.png" class="img-circle" /> </td>
<td style="">{{item.message}} <span class="text-primary">@{{item.username}}</span></td>
</tr>
</table>
</li>

</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>


<div class="row">
<div class="col-sm-offset-3 col-sm-7 col-xs-12">
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageEmpty">
Oh gosh ! Really you don't wanna do anything before you are gone !!! ohh... come on
</p>

<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageTooLong">
You are trying to do too many things buddy, just 150 characters !!!
</p>

<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameEmpty">
Looks like you forgot to mention your name !!!</p>

<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameTooLong">
Sorry we can't handle such a long name, please type a short name !!!</p>

</div>
</div>

<div class="row">

<form name="messageForm"
novalidate="novalidate" ng-submit="onSubmit()" id="message-box">

<div class="form-group" >
<textarea class="col-sm-offset-4 col-sm-5 col-xs-12 " required
ng-model="formModel.message"
style="border:double 4px #2B689D;border-radius: 0.5em;"
rows="3" id="message"
placeholder="Choose your life's best 150 characters followed by @ and your name, then shoot it.."></textarea>
<br/>
<button style="margin-left: 5px" class="col-sm-1 col-xs-12 btn btn-primary" type="submit">Shoot it</button>
<br/>
</div>
<br/><br/>
<p class="col-sm-offset-3 col-xs-12 col-sm-7 alert alert-success"
style="text-align:center">
e.g. Will love to go to antarctica for adventure, feels kinda penguin@amy
</p>
<br/>
</form>

</div>


<div class="row">
<div class="col-sm-12 col-xs-12">
<span style="font-weight:bold;">
Made with the help of <span style="text-decoration:line-through">5 </span>15 cups of coffee by
</span>
<a style="color:white" href="https://twitter.com/alammahtab08" target="_blank">@alammahtab08</a>
</div><br/>
</div>

</div>

<script src="/libs/js/angular-animate.min.js"></script>
<script src="/libs/js/toaster.min.js"></script>
</body>

</html>


After comments below added bootstrap classes for small screens col-xs and col-sm

Now it looks as this

No Space between textarea,button and message

Answer

Just copy and replace below class in your textarea. Refer below image to understand how column class works.


enter image description here


col-sm-offset-4 col-xs-12 col-sm-5

For spacing problem in mobile view you need to use media query, See the below code. You can add your custom class also for button.


@media (max-width: 768px){ 

    .btn-primary{
        margin-top: 2rem;
        margin-bottom: 2rem; 
    }
}