Twitter bootstrap itself isn&#39;t jQuery dependant.

If you use just the CSS part of it, you won&#39;t need jQuery. 

If you use the Javascript plugins you need jQuery, since they are **jQuery plugins**.

**v3**: http://getbootstrap.com/javascript/

**v4**: https://getbootstrap.com/docs/4.0/getting-started/javascript/




Short answer is yes but as Bruno says, the jQuery plugins won&#39;t work. To workaround this, I made a small replacement script so the dropdown menus, alert boxes and collapsible nav bar will work without jQuery: http://daniemon.com/blog/bootstrap-without-jquery/

Yes you can via [Native Javascript for Bootstrap][1].
Enjoy


  [1]: http://thednp.github.io/bootstrap.native/

Bootstrap 5 will be without jQuery dependency. Reference: [Concerned PR](https://github.com/twbs/bootstrap/pull/23586) 


You do not need to use jQuery. Boostrap will perform better with native JavaScript than jQuery.

Try one of these:

 1. [Bootstrap Native][1]
 2. [Bootstrap Native JavaScript][2]
 3. [Vue.js][3]


  [1]: https://github.com/thednp/bootstrap.native
  [2]: https://thednp.github.io/bootstrap.native/
  [3]: https://medium.com/js-dojo/drop-jquery-from-your-bootstrap-project-and-replace-it-with-vue-js-82230bfca98a

I have a header box including border and padding and background color for that box,
can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?

Just a pinch of the code where I want the padded background color:

    nav {
        margin:0px auto;
        width:100%;
        height:50px;
        background-color:grey;
        float:left;
        padding:10px;
        border:2px solid red;
    }

Can I add background color only for padding?

I have this simple a js file , which prints date continosly .

I am using Google Chrome Debugger tools (F12)


My question is , **Is it possible to set a conditional break point in Google Chrome ??**

In my code , i want to set a break point if the seconds value is equal to 50 ??

    s = date.getSeconds();

[This][1] is the jsfiddle where my source is

(Not sure why its not working in jsfiddle)


Anyway my question is ,Is it possible to Set a Conditinal Break Point in chrome Debugger tools ??


  [1]: http://jsfiddle.net/nVpXN/1/

JavaScript :How to set a Conditional Break Point in Chrome debugger tools

I work in a project where we don&#39;t use JQuery.

Is twitter bootstrap dependant on it ?  



Can I use twitter bootstrap without jquery?

<p>I work in a project where we don't use JQuery.</p>
<p>Is twitter bootstrap dependant on it ?</p>


I&#39;m using Twitter Bootstrap and I notice that jQuery `show()` or `fadeIn()` doesn&#39;t make DOM element marked with class `hidden` appear because the jQuery functions only remove the `display: none` specification. However, the `visibility` is still set to `hidden`.

I wonder what is the best possible way to work around this?

1. Remove the `hidden` class on the element
2. Change the visibility property
3. Overwrite the hidden class in my own css

In particular, I want to know whether fixing this with jQuery or css is better and why.

jQuery show() for Twitter Bootstrap css class hidden

I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue 

    &lt;html&gt;
    &lt;head&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
    &lt;title&gt;Index&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/stylesheets/bootstrap.css&quot;/&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/stylesheets/bootstrap-responsive.css&quot;/&gt;
    
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;navbar navbar-fixed-top &quot;&gt;
            &lt;div class=&quot;navbar-inner&quot;&gt;
                &lt;div class=&quot;container&quot;&gt;
               &lt;button data-target=&quot;.nav-collapse&quot; data-toggle=&quot;collapse&quot; class=&quot;btn btn-navbar collapsed&quot; type=&quot;button&quot;&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;/button&gt;
                    &lt;div class=&quot;nav-collapse&quot;&gt;&lt;ul class=&quot;nav&quot; id=&quot;navbar&quot;&gt;&lt;li ng-class=&quot;{active:section==&#39;plunks&#39;}&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;/plunks/trending&quot;&gt;&lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a target=&quot;_self&quot; href=&quot;/edit/&quot;&gt;&lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt;General Election 2014&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;divider-vertical&quot;&gt;
                        &lt;/li&gt;&lt;li class=&quot;dropdown&quot;&gt;&lt;a class=&quot;dropdown-toggle&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
                            &lt;i class=&quot;icon-eye-open&quot;&gt;
                            &lt;/i&gt;Assembly Elections
                            &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                            &lt;/a&gt;
                            &lt;ul class=&quot;dropdown-menu&quot;&gt;
                                    &lt;li&gt;&lt;a href=&quot;#/HTML5Apps&quot;&gt;Assembly Elections 2013&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                             &lt;/li&gt;&lt;li class=&quot;divider-vertical&quot;&gt;
                        &lt;/li&gt;&lt;li ng-class=&quot;{active:section==&#39;tags&#39;}&quot;&gt;&lt;a href=&quot;/tags&quot;&gt;&lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt;Constituecy&lt;/a&gt;&lt;/li&gt;&lt;li ng-class=&quot;{active:section==&#39;discuss&#39;}&quot;&gt;&lt;a href=&quot;/discuss&quot;&gt;&lt;i class=&quot;icon-time&quot;&gt;&lt;/i&gt;Election News&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;divider-vertical&quot;&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;https://github.com/filearts/plunker&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;Candidate&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
        &lt;/div&gt;
      &lt;div  class=&quot;container&quot; &gt;
       &lt;ul class=&quot;nav nav-pills&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Popular&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Trending&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Latest&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
    
        &lt;script src=&quot;~/Scripts/jquery.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;~/Scripts/bootstrap-dropdown.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;~/Scripts/Collapse.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;



Bootstrap css hides portion of container below navbar navbar-fixed-top

I am using Angular and Twitter Bootstrap navbar and trying to get the collapse functionality to work.

**Partial: program.html**

    &lt;div class=&quot;navbar navbar-inverse navbar-static-top&quot; ng-include=&quot;&#39;partials/navbar.html&#39;&quot; ng-controller=&quot;NavbarCtrl&quot;&gt;&lt;/div&gt;

**Partial: navbar.html**

    &lt;div class=&quot;navbar-inner&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;a class=&quot;btn btn-navbar&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;Short Course&lt;/a&gt;
            &lt;div class=&quot;nav-collapse collapse&quot;&gt;
                &lt;ul class=&quot;nav&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-home icon-white&quot;&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&quot;dropdown ng-class: settingsActive;&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Intro &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class=&quot;dropdown-menu&quot;&gt;
                            &lt;li&gt;&lt;a onclick=&#39;$(&quot;#myModal&quot;).modal(&quot;show&quot;);&#39;&gt;User Info&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#/setup&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#/get-started&quot;&gt;Getting started&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown ng-class: programActive;&quot; ng-controller=&quot;ProgramCtrl&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Lessons &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class=&quot;dropdown-menu&quot;&gt;
                            &lt;li ng-repeat=&#39;o in lessonTypes&#39;&gt;
                                &lt;a href=&quot;#/program/{{o.value}}&quot;&gt;{{o.title}}&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#/freeform&quot;&gt;Free Form&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;dropdown ng-class: reportsActive;&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Grades &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class=&quot;dropdown-menu&quot;&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Simple Report&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Comprehensive Report&lt;/a&gt;&lt;/li&gt;
                            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Current Grade Report&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Final Grade Report&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class=&quot;nav pull-right&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;#/class&quot;&gt;&lt;i class=&quot;icon-upload icon-white&quot;&gt;&lt;/i&gt; Upload/Save&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#/class&quot;&gt;&lt;i class=&quot;icon-off icon-white&quot;&gt;&lt;/i&gt; Save/Logout&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /navbar-inner --&gt;

The navbar displays perfectly. The dropdowns work great. The Angular functions load the data and mark the specific items as active and populate the models perfectly. The only thing that doesn&#39;t work is the responsive collapse feature.  When I resize the screen, the menu items disappear and the icon for the menu appears, but clicking on it does not work.  I am stuck on this and I know it has to be a simple fix, but I just can&#39;t figure it out.  Any help would be appreciated!

Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning

Twitter [Bootstrap&#39;s buttons][1] have a nice `Loading...` state available.

The thing is that it just shows a message like `Loading...` passed through the `data-loading-text` attribute like this:

    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary start&quot; id=&quot;btnStartUploads&quot;
            data-loading-text=&quot;@Localization.Uploading&quot;&gt;
        &lt;i class=&quot;icon-upload icon-large&quot;&gt;&lt;/i&gt;
        &lt;span&gt;@Localization.StartUpload&lt;/span&gt;
    &lt;/button&gt;

Looking at Font Awesome, you see that there&#39;s now an [animated spinner icon][2].

I tried to integrate that spinner icon when firing an `Upload` operation like this:

    $(&quot;#btnStartUploads&quot;).button(&#39;loading&#39;);
    $(&quot;#btnStartUploads i&quot;).removeAttr(&#39;class&#39;);
    $(&quot;#btnStartUploads i&quot;).addClass(&#39;icon-spinner icon-spin icon-large&#39;);

but this had no effect at all, that is, I just see the `Uploading...` text on the button.

Is it possible to add an icon when the button is in the Loading state? Looks like somehow Bootstrap just removes the icon `&lt;i class=&quot;icon-upload icon-large&quot;&gt;&lt;/i&gt;` inside the button while in the Loading state.

&lt;hr&gt;

Here&#39;s a simple [demo][3] that shows the behavior I describe above. As you see when it enters the Loading state the icon just disappears. It reappears right after the time interval.


  [1]: http://getbootstrap.com/javascript/#buttons
  [2]: http://fortawesome.github.com/Font-Awesome/#examples
  [3]: http://jsbin.com/obogof/2

How to add a spinner icon to button when it&#39;s in the Loading state?

I&#39;m using the [Bootstrap-Select][1] plugin like this:

**HTML**:

&lt;!-- language: lang-html --&gt;

    &lt;select name=&quot;selValue&quot; class=&quot;selectpicker&quot;&gt;
       &lt;option value=&quot;1&quot;&gt;Val 1&lt;/option&gt;
       &lt;option value=&quot;2&quot;&gt;Val 2&lt;/option&gt;
       &lt;option value=&quot;3&quot;&gt;Val 3&lt;/option&gt;
       &lt;option value=&quot;4&quot;&gt;Val 4&lt;/option&gt;
    &lt;/select&gt;

**Javascript**:

&lt;!-- language: lang-js --&gt;

    $(&#39;select[name=selValue]&#39;).selectpicker();

Now I want to set the value selected to this select when button clicked... something like this:

&lt;!-- language: lang-js --&gt;

    $(&#39;#mybutton&#39;).click(function(){
       $(&#39;select[name=selValue]&#39;).val(1);
    });

But nothing happens.

How can I achieve this?

[1]: https://github.com/silviomoreto/bootstrap-select


Content Type	Original Author	Original Content on Stackoverflow
Question	Zo72	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	Bruno Campos	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	tagawa	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	thednp	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	the_spectator	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Dan Bray	View Answer on Stackoverflow

Can I use twitter bootstrap without jquery?

Twitter Bootstrap Problem Overview

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

Solution 2 - Twitter Bootstrap

Solution 3 - Twitter Bootstrap

Solution 4 - Twitter Bootstrap

Solution 5 - Twitter Bootstrap

JavaScript :How to set a Conditional Break Point in Chrome debugger tools

Can I add background color only for padding?

Attributions