CODEWITHSUNDEEP
csstwitter-bootstrap
user1385809
user1385809

Reputation: 83

Bootstrap how to align items from vertical to horizontal

I want to implement something responsive like the page duckduckgo.com. It has a logo, DuckDuckGo literal, and a search box. When I shrink the browser to a almost horizotal bar, the three components align from vertical to horizontal, and the logo and literal also become smaller. I wonder how to implement it through bootstrap?

Upvotes: 0

Views: 316

Answers (2)

Alessander Franca
Alessander Franca

Reputation: 2753

All you need is use media queries. This link of mozilla can help you:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

A simple example in css would be like this:

@media (max-width: 767px) and (orientation: landscape) { 
   .div1{
        width:50%;
        float:left;
   }
   .div2{
        width:50%;
        float:left;
   }
}
@media (min-width: 768px) and (orientation: landscape) { 
   .div1{
        width:100%;
        float:left;
   }
   .div2{
        width:100%;
        float:left;
   }
}

if the screen is in landscape and max-width is 767 then the divs will positioneted side by side. Case the acreen is in landscape and min-width is 768 then the divs will have width:100%.

Upvotes: 0

Alessander Franca
Alessander Franca

Reputation: 2753

I advice you read the bootstrap documentation in this link below:

http://getbootstrap.com/css/

In this link you have all the information about mobile resolution, media screen and etc.

I did a sample to help you of start doing your website:

The HTML code:

<div class="general">
    <div class="container">
        <header class="col-xs-12">
            <img class="logo" src="http://blog.kajrietberg.nl/wp-content/uploads/2013/09/HTML5_oval_logo.png">
                <span class="col-xs-12 title">alexfqc sample</span>
        </header>

            <main>
                <input class="col-xs-10 col-xs-offset-1 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset3 col-lg-6">                
            </main>
    </div>
</div>

The CSS code:

body{
    background-color:#F7F7F7;    
    min-width:320px;
}

general{
    width:100%;
}

header{
    margin-top:40px;
}

.logo{
    width:35%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.title{
    text-align:center;
    margin-top:10px;
}

input{
    height:30px;   
}

The bootstrap has a class "container" that auto scale to the screen resolution, the class col-xs-12 means that this has width:100% to screens until 768px. Bootstrap has a division in 12 blocks, then you have to insert class width the resolutions based in this 12 blocks. To have a width:50% in resolutions until 768px you just have to insert the class col-xs-6. If you do not insert the classes to the other resolutions (col-sm- , col-md- , col-lg- ) the width:100% from col-xs-12 will be replicated to the other resolutions.

I change the margin and the width of input according width resolution:

col-xs-10 col-xs-offset-1 = 1 block to margin-left and 10 blocks to input width, 1 + 10 = 11 (1 block is missing to complete 12, this is to align horizontally this block in the center).
col-sm-offset-2 col-sm-8 = 2 blocks to marign-left and 8 blocks to width.
col-md-offset-3 col-md-6 = 3 blocks to margin-left and 6 blocks to width.

Upvotes: 1

Related Questions