CODEWITHSUNDEEP
csstwitter-bootstrap-3
user3789976
user3789976

Reputation: 27

How to use container class and my wrappper together Bootstrap 3?

how can I use my own fixed size wrapper and responsive container class from Bootstrap. When I use together and responsive is lost My example code : 

<div class="container">
    <div class="wrapper">
        <div class="row">
            <div class="col-md-12 col-ms-12">
                <p>Всеки дом са нуждае от малко Коледна магия и ние имаме идеалната рецепта. Трябват ви само: 1 бр красиво украсена елха, щипка светещи лампички, малко декорация и много подаръци за твоите близки под елхата. Разгледай нашите промоционални предложения и се подгответе за най-магически празник
                    от годината.</p>
            </div>
        </div>
    </div>
</div>

And CSS:

.wrapper {
width: 980px;
margin: 0 auto;

}

class Container is defined by Bootstrap Thanks!

Upvotes: 2

Views: 27687

Answers (3)

Rakhat
Rakhat

Reputation: 4942

If you want disable responsive for all containers in site: 1. Omit the viewport <meta name="viewport" content="width=device-width, initial-scale=1"> 2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu. 3. If using navbars, remove all navbar collapsing and expanding behavior. 4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

Upvotes: 0

DavidG
DavidG

Reputation: 118937

The problem you have with your wrapper class is that it is going to break the responsive nature of Bootstrap. The best solution would be to customise the Bootstrap library directly.

Just visit http://getbootstrap.com/customize/ and play with the Container sizes there.

Upvotes: 4

DanCouper
DanCouper

Reputation: 850

Put the wrapper around the container, you are literally wanting to wrap a Bootstrap container with your wrapper, so literally doing that should achieve what you want.

<div class="wrapper">
<div class="container">
    <div class="row">
        <div class="col-md-12 col-ms-12">
            <p>Всеки дом са нуждае от малко Коледна магия и ние имаме идеалната рецепта. Трябват ви само: 1 бр красиво украсена елха, щипка светещи лампички, малко декорация и много подаръци за твоите близки под елхата. Разгледай нашите промоционални предложения и се подгответе за най-магически празник
                от годината.</p>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions