CODEWITHSUNDEEP
htmltwitter-bootstrap-3resize
usert4jju7
usert4jju7

Reputation: 1813

bootstrap - components resize issues

I'm new to the world of UI design. I'm trying to get a basic page up & running with bootstrap. What I'm after is the underlying reason for using bootstrap which is to scale the page & it's components depending on the device on which the web page is loaded. I'm failing just with this very requirement :)

Here's the code I'm trying to get working 

            <div class="container-fluid">
           <div class="row-fluid ">
                <div class="row row-eq-height ">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

This code doesn't re-size all the contents of the web page being loaded. I see just half the contents when I click on "restore" button of the browser.

A few questions

1) My understanding of bootstrap is that it is mobile first technology meaning, if we were to develop for small devices, then it could scale up to anything big. Please correct me if I've misunderstood this. Hence, Does one have to specify, -xs-, -md- & -lg- for all the elements in question to get the re-size working or is specifying -xs- enough? If not, which of these should I specify so that the scaling automatically happens across any device.

2) Is responsive web design only about handling content re-sizing?

I'd highly appreciate any help to get me moving here please.

Upvotes: 0

Views: 110

Answers (1)

GunvantParmar
GunvantParmar

Reputation: 143

Can you please check this code 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
           <div class="row-fluid">
                <div class="row row-eq-height">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

Upvotes: 1

Related Questions