CODEWITHSUNDEEP
twitter-bootstrapmedia-queries
Chaitanya K
Chaitanya K

Reputation: 1852

Media queries for container class

My screens sizes are such

Link for testing

27in. Monitor, Dell U2711: 2560px wide x 1440px high
17in. Workstation: 1920px wide x 1200px high
15in. Macbook Pro: 1680px wide x 1050px high
11in. Macbook Air: 1366px wide x 768px high
iPad (Landscape): 1024px wide x 768px high
iPad (Portrait): 768px wide x 1024px high
Nexus7 (Landscape): 966px wide x 603px high
Nexus7 (Portrait): 603px wide x 966px high
iPhone (Landscape): 480px wide x 320px high
iPhone (Portrait): 320px wide x 480px high

I tried with media queries but i am getting left alignment, i want full screen 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Layout123</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">



</head>


<body>
<div class="container">

    <div class="row">
        <div class="col-xs-6 col-md-8 col-lg-12">
        <img src="http://chinadomination.com/RC-2.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

    <div class="row">
        <div class="col-xs-6 col-md-8 col-lg-12">
        <img src="http://chinadomination.com/china_under.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

</div>  


</body>
</html>

i want to align the container at center for all the desktop and full screen for mobile

Upvotes: 2

Views: 865

Answers (2)

Alupotha
Alupotha

Reputation: 10113

you change the question that's why I add another answer

If you don't want to get size 6 column in mobile view just add only col-lg-12

<style>
.imgCenter{
margin-left: auto;
  margin-right: auto;
}
</style>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
            <img src="http://chinadomination.com/RC-2.png" class="img-responsive imgCenter" alt="Responsive image">
            </div>
            </div>

        <div class="row">
            <div class="col-lg-12">
            <img src="http://chinadomination.com/china_under.png" class="img-responsive imgCenter" alt="Responsive image">
            </div>
            </div>

    </div>

Upvotes: 1

Alupotha
Alupotha

Reputation: 10113

add bootstrap offsets

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

<div class="container">

    <div class="row">
        <div class="col-xs-6 col-xs-offset-3 col-md-8 col-md-offset-2 col-lg-12">
        <img src="http://chinadomination.com/RC-2.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

    <div class="row">
        <div class="col-xs-6 col-xs-offset-3 col-md-8 col-md-offset-2 col-lg-12">
        <img src="http://chinadomination.com/china_under.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

</div>

Upvotes: 1

Related Questions