Is it possible to apply bootstrap for a div only, using CDN?

Question

I have designed a div with some contents using twitter bootstrap. Now I want to generate a snippet of this page so that other user can just copy-paste this snippet in their page. But the problem is, it is not guaranteed that all of them will use bootstrap, so this snippet will not work in non bootstrap site.

I have added some custom css class too. I can add those style with the snippet using style tag. If I want to add bootstrap style in the same way, it will be huge.

Is is possible to use bootstrap CDN for that particular div? so that bootstrap styling will not affect the other part of that page. Or is there any other approach?

Here is the snippet:

<div id="login-form">
    <div class="row row-padded">
        <div class="col-md-7">
            <form role="form">
                <div id="title" class="section-header login-form-label">Login</div>
                <div class="form-group">
                    <label for="exampleInputEmail1" class="login-form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1" class="login-form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>

                <button type="button" class="btn btn-primary" id="primary-button-text">Primary</button>

                <div><a href="#" class="">Forgot password?</a></div>
                <div><a href="#" class="" id="register-link-text">New here? Create an Account</a></div>

            </form>
        </div>
    </div>

Possible duplicate of [Applying CSS styles only to certain elements](http://stackoverflow.com/questions/11831346/applying-css-styles-only-to-certain-elements) — J.Tural, Jan 18 '16 at 06:09

score 3 · Accepted Answer · edited May 23 '17 at 11:47

I don't think you can do this with CDN cause you can not apply the style on the div only (try a iframe?).

What you can do is try to compile the minimum css required and apply this on your div.

Download the latest version of Bootstrap from Github.

Copy every bootstrap class you will use to a subclass of #login-form in Less like:

#login-form .row {.row;}

Add this lines to the end of bootstrap.less and compile this files, copy the latest lines of the resulting CSS the #login-form

For your example i use:

#login-form .row {.row;}
#login-form .col-md-7 {.col-md-7;
    float: left;
    width: percentage((7 / @grid-columns)); 
}
#login-form .form-group {.form-group}
#login-form .btn {.btn;}
#login-form .btn-primary {.btn-primary;}
#login-form .form-control {.form-control;}

This will result in:

#login-form .row:after{clear:both}
#login-form .row:before,#login-form .row:after{content:" ";display:table;}
#login-form .row:after{clear:both}
#login-form .col-md-7{position:relative;min-height:1px;padding-left:15px;padding-right:15px;float:left;width:58.333333333333336%}
#login-form .form-group{margin-bottom:15px}
#login-form .btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.428571429;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#login-form .btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
#login-form .btn:hover,#login-form .btn:focus{color:#333;text-decoration:none}
#login-form .btn:active,#login-form .btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}
#login-form .btn.disabled,#login-form .btn[disabled],fieldset[disabled] #login-form .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}
#login-form .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}#login-form .btn-primary:hover,#login-form .btn-primary:focus,#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e}
#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{background-image:none}
#login-form .btn-primary.disabled,#login-form .btn-primary[disabled],fieldset[disabled] #login-form .btn-primary,#login-form .btn-primary.disabled:hover,#login-form .btn-primary[disabled]:hover,fieldset[disabled] #login-form .btn-primary:hover,#login-form .btn-primary.disabled:focus,#login-form .btn-primary[disabled]:focus,fieldset[disabled] #login-form .btn-primary:focus,#login-form .btn-primary.disabled:active,#login-form .btn-primary[disabled]:active,fieldset[disabled] #login-form .btn-primary:active,#login-form .btn-primary.disabled.active,#login-form .btn-primary[disabled].active,fieldset[disabled] #login-form .btn-primary.active{background-color:#428bca;border-color:#357ebd}
#login-form .form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}#login-form .form-control:-moz-placeholder{color:#999}
#login-form .form-control::-moz-placeholder{color:#999}
#login-form .form-control:-ms-input-placeholder{color:#999}
#login-form .form-control::-webkit-input-placeholder{color:#999}
#login-form .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)}
#login-form .form-control[disabled],#login-form .form-control[readonly],fieldset[disabled] #login-form .form-control{cursor:not-allowed;background-color:#eee}
textarea#login-form .form-control{height:auto}

See this with your code: http://jsfiddle.net/gDraJ/

Note some less rules are wrapped in media queries (i don't know how to copy them). So in this example i use:

#login-form .col-md-7 {.col-md-7;
    float: left;
    width: percentage((7 / @grid-columns)); 
}

where #login-form .col-md-7 {.col-md-7;} should be expected.

In the fiddle example i also add:

#login-form
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

See: Twitter's Bootstrap 3 with ShareThis widget and Why did Bootstrap 3 switch to box-sizing: border-box?

update In theory you also could wrap all content of bootstrap.less inside #login-form{} and compile this. The resulting CSS will apply all Bootstrap's rules on #login-form only. Of course you could provide this CSS on an external url.

score 1 · Answer 2 · answered Nov 07 '13 at 22:09

I would recommend finding an alternative solution, but it is possible to do this:

Use less (http://lesscss.org/) on the client, and create a less file that will use source css from a CDN.

This of course does not have as good performance, but will work dynamically like you wanted.

Is it possible to apply bootstrap for a div only, using CDN?

2 Answers2

Linked