How to use bootstrap in a single div

Question

(sorry bad english..) is it possible to use the bootstrap grid in only one area (center div), not the whole site. The rest of the page should not be styled by bootstraps css rules. Thx

Bootstrap is CSS. I'm not sure what you're trying to accomplish but if you like something specific from Bootstrap just look through the source code and emulate that in your CSS. — elrick, Nov 07 '13 at 12:57

score 14 · Accepted Answer · answered Nov 07 '13 at 13:51

You can put all bootstrap css in .scss file and wrap all rules inside your own class which you can apply later on containers where you want bootstrap rules to be applied.

.enable-bootstrap {
   /* all bootstrap rules goes here */
}

After compiling this .scss file you will get all bootstrap rules starts with .enable-bootstrap so they will be applied only for content inside container with class enable-bootstrap

score 7 · Answer 2 · edited Nov 08 '13 at 18:07

7

It is possible, just implement the styling and script necessary for bootstrap to work. Then start with this markup where you want to use the bootstrap grid:

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <!-- content in a 12 column div -->
        </div>
    </div>
</div>

edited Nov 08 '13 at 18:07

Mr Lister

45,515
15
108
150

answered Nov 07 '13 at 13:43

centurion

91
6

1

I believe this is not need answer. – pedrofernandes Feb 19 '18 at 18:35
Looking back at this post 8 years later I agree with @pedrofernandes. Should I delete this answer? – centurion Jan 31 '22 at 13:45

score 1 · Answer 3 · answered Dec 18 '13 at 05:46

1

You can use this:

.enable-bootstrap {
(and write your styling here) }

answered Dec 18 '13 at 05:46

Shikhar

971
1
8
18

How to use bootstrap in a single div

3 Answers3