bootstrap grid help

i am going through this tutorial - http://getbootstrap.com/css/#grid-options .
Why we should mention

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

when max column allowed is 12.How can we keep column 18 in xs..pls clarify my doubt.
codeoxygenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
A column is large respect to its container. If you create a column col-lg-6, within it you can put a column col-lg-12 that is large as its container which is 6.
<div class="col-lg-6">
    <div class="<col-lg-12"> <!-- fill col-6 -->
        <div class="col-lg-4">   |
        </div>                             |
        <div class="col-lg-8">   | fill col-12
        </div>                             |
    </div>
</div>
<div class="col-lg-6">
</div>

Open in new window


Hope this is clear :-)
codeoxygenAuthor Commented:
Actually i am fresher to bootstrap so i am cant able to get the answer.pls explain little more brief
Marco GasiFreelancerCommented:
Suppose you put 2 col 6 within your container. Each column will occupie 50% of the container width. If in one of those colums you want to put a column which occupie the 100% of that column you have to put a col-lg-12. The number which classify column width is relative to its container. If the container is a div with class container the col 12 will have a width equal to the container. If container is a column 6 that is the 50% of the container, then the width will be the 100% of the column that is the 50 % of the container.
When I'll come back to my computer and its keyboard I'llexplain better... I hate smartphone's keyboards :-)
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Marco GasiFreelancerCommented:
Sorry, I misundertood your question.
Then, you're reading this example:

.col-xs-12 .col-md-8  .col-xs-6 .col-md-4
.col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4
.col-xs-6 .col-xs-6

Open in new window


But read this also:
"Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns."

If you use just .col-md-6 columns, you create two columns that in a extra small device like a phone will go one below the other, that is they will stack. But with Bootstrap you can, if you want, give your site a totally different look accordingly to the device used to browse it. So in the first example:
.col-xs-12 .col-md-8  .col-xs-6 .col-md-4

Open in new window

In a medium screen you'll have tow columns in one row, the first large 8 and the second large 4; but in a extra mall screen you'll have the first column fit the screen width and the second will be placed below the first but it will occupy only half screen.
The second example, the three aligned column col-md-4 will become three columns large half screen so the first two will be in the same row and the third one will be placed below.

Sorry if with my previous explanation I make you confused, I had totally misundertood the question. Hope this one answer will clarify your doubts.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
codeoxygenAuthor Commented:
sir,I am doing a demo proj in responsive using bootstrap but if every time when i am making responsive  the <div id+ date> tag makes error  which goes beyond the limit and also tel how to reduce the size of from date text  area while responsing..pls clarify my doubt--this is the code which iam using
<!doctype>
<html>
<head>
<title>usingbootstrap</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.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
   @media (min-width: 1170px) {
  .beforefooter {
  max-width: 800px;}
  .footer{
  max-width:1150px;}


}




   .panel-body {
background:#FFFF99;
color:white;
}
   
.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }

 .no-margin{
    margin:-10px;
}
 .no-padding
{
    padding:0px;
}

#date{
      width:1160px;
   margin:10 auto;
   padding:48px;
   background:#66E0A3;
   height:150px;
}
#text{
    width:1130px;
   margin:-10 auto;

}

#beforefooter{
    width:1160px;
   margin:0 auto;
   padding:48px;
   background:yellow;
   height:150px;
 
}

#footer{
     width:1150px;
   margin:0 auto;
   padding:48px;
   background:black;
   height:20px;
}
#align{
  text-align:center
 
}
 


</style>
</head>
<body>
           <div class="container">
      <div class="no-margin no-padding">
     
    <nav class="navbar navbar-inverse navbar-static-top " role="navigation">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
</button>
       
          <a class="navbar-brand" href="#">HEADER</a>

          <div class="navbar-header navbar-right">
           <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
               <li><a href="#">RESERVATION</a></li>
               <li><a href="#">DONT MISS</a></li>
               <li><a href="#">CONTACT US</a></li>
              </ul>

     </div>
  </nav>
</div>
     
     </div>
    </div>

     
           <div class="container ">
           
  <div class="panel panel-default no-margin no-padding ">
   
    <div class="panel-body">
       
     
          <ul class="list-inline">
         
    <li><a href="#"><bold>Home</bold></a></li>
    <li><a href="#"><bold>ABOUT US</bold></a></li>
    <li><a href="#"><bold>ROOMS&SUITES</bold></a></li>
    <li><a href="#"><bold>WEDDING/CONFRENCE HALLS</bold></a></li>
    <li><a href="#"><bold>TIRUMALA INFO</bold></a></li>
    <li><a href="#"><bold>FACILITIES&AMENITIES</bold></a></li>
    <li><a href="#"><bold>PHOTO GALLARY</bold></a></li>
    <li><a href="#"><bold>LOCATION</bold></a></li>
     




   
  </ul>
</div>
  </div>
</div>

                   
           
                     
                    <div class="container">

   
  <br>
  <div id="myCarousel" class="carousel slide no-margin no-padding" data-ride="carousel">
   
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

   
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQng_fEAV4VAaTOvEuTzACqQLwQwZIPlcp4TpBr0FLHctG9Onv1KzK2cXPo" alt="corridor" width="160" height="345">
      </div>

      <div class="item">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuejgEopCSXXhK3NvvGEdWau-sAkn9bvzXySwI6ETRgzDzLiIp" alt="hall" width="160" height="345">
      </div>
   
      <div class="item">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4oUPyVFvEcsxvc7sfDQ829374Qh582A6kRhlX1kyWbh_kL6Ks" alt="tv room" width="160" height="345">
      </div>

      <div class="item">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSAVRlq0LUAGa0PQUObacsIwnB6VqBV0t7RlM7HTrG3Ey5bmy9x" alt="hallr" width="160" height="345">
      </div>
    </div>

   
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
</div>
</div>
<div class="container1">
 <div id="date">
 <form class="form-inline" role="form">
  <div class="form-group">
      <label for="email">FROM DATE</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">TO DATE</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
        <lable for="wgtmsr">night rooms</lable>
 <div class="form-group">
<select name="night rooms" id="wgtmsr">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group">
<lable for="adults">adults</lable>
<select name="night rooms" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group">
<lable for="childrens">childrens</lable>
<select name="night rooms" id="childrens">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group">
<button type="button" class="btn btn-success">button</button>
</div>
  </form>
</div>
</div>
<div class="clearfix visible-md-block"></div>
  <div id="text">

<div class="row">
   
    <div class="col-sm-3 col-md-4" style="background-color:lavender;">It is our pleasure to introduce once again ourselves as a 3 Star category luxury Hotel located in the foothills of the world famous Tirumala Shrine, the abode of LORD BALAJI. Having 117 well appointed rooms with one Multicuisine Restaurant and one Pure-Veg. Restaurant, 2 Bar & Restaurants, 7 Banquet Halls, Swimming Pool and world class Techno Gym. Our’s is the only and first hotel ISO 9001:2008 certified in Rayalaseema Region, Andhra Pradesh. Excellence Award Winner–2008-09 in 3 Star Category Hotels & Excellence Award Winner 2009-10 in Best Restaurant Category by A.P.Tourism.</div>
    <div class="col-sm-3 col-md-4" style="background-color:lavenderblush;">It is our pleasure to introduce once again ourselves as a 3 Star category luxury Hotel located in the foothills of the world famous Tirumala Shrine, the abode of LORD BALAJI. Having 117 well appointed rooms with one Multicuisine Restaurant and one Pure-Veg. Restaurant, 2 Bar & Restaurants, 7 Banquet Halls, Swimming Pool and world class Techno Gym. Our’s is the only and first hotel ISO 9001:2008 certified in Rayalaseema Region, Andhra Pradesh. Excellence Award Winner–2008-09 in 3 Star Category Hotels & Excellence Award Winner 2009-10 in Best Restaurant Category by A.P.Tourism.
 </div>
    <div class="col-sm-6 col-md-4" style="background-color:lavender;">It is our pleasure to introduce once again ourselves as a 3 Star category luxury Hotel located in the foothills of the world famous Tirumala Shrine, the abode of LORD BALAJI. Having 117 well appointed rooms with one Multicuisine Restaurant and one Pure-Veg. Restaurant, 2 Bar & Restaurants, 7 Banquet Halls, Swimming Pool and world class Techno Gym. Our’s is the only and first hotel ISO 9001:2008 certified in Rayalaseema Region, Andhra Pradesh. Excellence Award Winner–2008-09 in 3 Star Category Hotels & Excellence Award Winner 2009-10 in Best Restaurant Category by A.P.Tourism.</div>
  </div>
</div>

         
     <div class="container">
<div class="form-group">

<P>Near Ramanuja circle,Renigunta road,Tirupati,A.P,india</p>
<P>TEL:8772237773,2255667/Mobile:(+91)7799266662|EMAIL:hotelbliss@blisstirupati.com</p>
</div>
</div>
</div>
 <div id="footer">
    <p id="align"><font color="white">copyrighr@2011.www.FOOTER.com</p>
</div>
</div>
</body>
</html>
Marco GasiFreelancerCommented:
First, I pray you to use 'code' tag to post code at EE. Look at the toolbar above the box you write in: click code and opening and closing code tags will appear in the comment box. Paste the code within those tags so it will be more readable for us and it will be easier to help you.
But in these cases the best thing you can do is put your code in a web server: you can choose one among the tons of available free hosting providers. Develop there your site, demos, projects: you'll can test them easily and if you get some issue you can post here a link to the live page. For probelms about css, responsiveness and so on is mutch better for use to see the live page than read lines and lines of markup trying to check the correspondent style rule. In the code you posted above I don't understand what are the divs which raise the issue...
codeoxygenAuthor Commented:
sir,this is my url..here u can see my ui   http://quickonline.us/dev/UI/UI.html.
screenshot1.png
screenshot2.png
Chris StanyonWebDevCommented:
For most of your site you're correctly using the Bootstrap column classes.

However, you also hard-code the width on a few elements that break the responsive nature of your site. Inside the <script> tag on your page you are setting these elements to a fixed size:

#text
#footer
#date

Remove the fixed width settings and your site will not run too wide.
Chris StanyonWebDevCommented:
As for your original question, the columns will wrap if they total more than 12:

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

On a medium device (col-md-*) this will show 2 columns in one row, in a 2:1 ratio (8:4):

[********][****]

On an extra small device (col-xs-*), it will show over 2 rows - the first will be the full width (12) and the next will be half width (6)

[************]
[******]
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.