    .text-left {
      text-align: left;
    }

    .text-right {
      text-align: right;
    }

    .text-center {
      text-align: center;
    }
bootstrap has added three css classes for text align.

Just use `class=&#39;text-center&#39;` in `&lt;h&gt;` element for center heading:

```html
&lt;h2 class=&quot;text-center&quot;&gt;sample center heading&lt;/h2&gt;
```

Use `class=&#39;text-left&#39;` in `&lt;h&gt;` element for left heading, 
and use `class=&#39;text-right&#39;` in `&lt;h&gt;` element for right heading.

Just use &quot;justify-content-center&quot; in the row&#39;s class attribute.
    
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row justify-content-center&quot;&gt;
        &lt;h1&gt;This is a header&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;


Per your comments, to center all headings all you have to do is add `text-align:center` to all of them at the same time, like so:

**CSS**
  
        h1, h2, h3, h4, h5, h6 {
            text-align: center;
        }

Bootstrap comes with many pre-build classes and one of them is `class=&quot;text-left&quot;`. Please call this class whenever needed. :-) 

In the current version of bootstrap 5.2.0 it is:
text-center, (center)
text-end, (right)
text-start, (left).

    &lt;p class=&quot;text-start&quot;&gt;Start aligned text on all viewport sizes.&lt;/p&gt;
    &lt;p class=&quot;text-center&quot;&gt;Center aligned text on all viewport sizes.&lt;/p&gt;
    &lt;p class=&quot;text-end&quot;&gt;End aligned text on all viewport sizes.&lt;/p&gt;

   




I have a nested JSON object that I need to loop through, and the value of each key could be a String, JSON array or another JSON object. Depending on the type of object, I need to carry out different operations. Is there any way I can check the type of the object to see if it is a String, JSON object or JSON array?

I tried using `typeof` and `instanceof` but both didn&#39;t seem to work, as `typeof` will return an object for both JSON object and array, and `instanceof` gives an error when I do `obj instanceof JSON`.

To be more specific, after parsing the JSON into a JS object, is there any way I can check if it is a normal string, or an object with keys and values (from a JSON object), or an array (from a JSON array)?

For example:

JSON

    var data = &quot;{&#39;hi&#39;:
                 {&#39;hello&#39;:
                   [&#39;hi1&#39;,&#39;hi2&#39;]
                 },
                &#39;hey&#39;:&#39;words&#39;
               }&quot;;
Sample JavaScript

    var jsonObj = JSON.parse(data);
    var path = [&quot;hi&quot;,&quot;hello&quot;];
    
    function check(jsonObj, path) {
        var parent = jsonObj;
        for (var i = 0; i &lt; path.length-1; i++) {
            var key = path[i];
            if (parent != undefined) {
                parent = parent[key];
            }
        }
        if (parent != undefined) {
            var endLength = path.length - 1;
            var child = parent[path[endLength]];
            //if child is a string, add some text
            //if child is an object, edit the key/value
            //if child is an array, add a new element
            //if child does not exist, add a new key/value
        }
    }
How do I carry out the object checking as shown above?

How to check if JavaScript object is JSON

I am diving into Scala and noticed sbt. I have been quite happy with Gradle in java/groovy projects, and I know there&#39;s a scala plugin for Gradle.

What could be good reasons to favour sbt over Gradle in a Scala project?

comparing sbt and Gradle

It is my first Twitter Bootstrap experience. I have added some headings (h1, h2, etc.) and they are aligned by left side. What is the right way to center headings?

Bootstrap center heading

<p>It is my first Twitter Bootstrap experience. I have added some headings (h1, h2, etc.) and they are aligned by left side. What is the right way to center headings?</p>


I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing tree plugins for [bootstrap][1] or [jquery-ui bootstrap][2].

---

For reference or for people confused about this question, I am looking for something like [dynatree][3] for bootstrap.


  [1]: http://twitter.github.io/bootstrap/
  [2]: http://addyosmani.github.com/jquery-ui-bootstrap/
  [3]: https://github.com/mar10/dynatree

Trees in Twitter Bootstrap

What is the best way to horizontally space Bootstrap buttons?

At the moment the buttons are touching:

    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-inverse dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
            &lt;i class=&quot;icon-in-button&quot;&gt;&lt;/i&gt;  
            Add to list
            &lt;span class=&quot;caret&quot;/&gt;
        &lt;/button&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;here&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;new&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;button class=&quot;btn btn-info&quot;&gt;
            &lt;i class=&quot;icon-in-button&quot;&gt;&lt;/i&gt;  
            more
        &lt;/button&gt;
    &lt;/div&gt;

[![Two Bootstrap buttons][1]][1] 

jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/

  [1]: https://i.stack.imgur.com/1B3mT.png


How can I make space between two buttons in same div?

I was looking to using the [Twitter Bootstrap Modal windows][1] as a partial view.  However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion.  Nevertheless, I think it&#39;d be cool to be able to use it as a partial view.

So for example, let&#39;s say I have a list of Games.  Upon clicking on a link for a given game, I&#39;d like to request data from the server and then display information about that game in a modal window &quot;over the top of&quot; the present page.

I&#39;ve done a little bit of research and found [this post](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) which is similar but not quite the same.  

Has anyone tried this with success or failure?  Anyone have something on jsFiddle or some source they&#39;d be willing to share?

Thanks for your help.


  [1]: http://twitter.github.com/bootstrap/javascript.html

Using Bootstrap Modal window as PartialView

How do I make a Bootstrap input field be exactly 100% as wide as its parent?

As steve-obrien wrote in [Bootstrap Issue #1058](https://github.com/twitter/bootstrap/issues/1058):

&gt; Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.

That ticket offers various solutions, but I&#39;m looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.

Perfect 100% width of parent container for a Bootstrap input?

Why isn&#39;t there a fancy file element upload button for twitter bootstrap? It would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload button using CSS? (seems like a native browser element that can&#39;t be manipulated) 

Twitter Bootstrap Form File Element Upload Button

I have a simple demo here:

    &lt;ul&gt;
        &lt;li&gt;One &lt;input class=&quot;btn pull-right&quot; value=&quot;test&quot;&gt;&lt;/li&gt;
        &lt;li&gt;Two &lt;input class=&quot;btn pull-right&quot; value=&quot;test2&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;

I have an unordered list and for each list item I wish to have text on the left and then a right aligned button.  I have tried to use pull-right but this completely messes up the alignment.  What am I doing wrong?

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;http://twitter.github.com/bootstrap/assets/css/bootstrap.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;ul&gt;
      &lt;li&gt;One &lt;input class=&quot;btn pull-right&quot; value=&quot;test&quot;&gt;&lt;/li&gt;
      &lt;li&gt;Two &lt;input class=&quot;btn  pull-right&quot; value=&quot;test2&quot; &lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;



How can I get my Twitter Bootstrap buttons to right align?

The default Bootstrap grid system utilizes 12 columns with each span having `30px` gutter as below. *Gutters are the white space between columns.* Gutter width seems to be between `20px` - `30px`. Let&#39;s assume it&#39;s `30px` here.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/rJS6T.png

I want to remove the gutter space for a specific `div`, so that there will be no gutter space in the row. Each span will be next to each other with no gutter.

The problem is if I remove the margin `30px` (gutter) it leaves `360px` (12 * `30px`) at the end of the row.

Given that I want to remove gutter space for a specific `div` only. Let&#39;s assume that it&#39;s for `div`s which are in the `main_content` `div`.

    div#main_content div{
      /*
     no gutter for the divs in main_content
     */
    }

How can I remove the gutter for a specific `div` without loosing Bootstrap responsiveness and not leaving space at the end of the row?

Remove gutter space for a specific div only

I&#39;m using Bootstrap and the following doesn&#39;t work:

    &lt;tbody&gt;
        &lt;a href=&quot;#&quot;&gt;
            &lt;tr&gt;
                &lt;td&gt;Blah Blah&lt;/td&gt;
                &lt;td&gt;1234567&lt;/td&gt;
                &lt;td&gt;&#163;158,000&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/a&gt;
    &lt;/tbody&gt;

how to make a whole row in a table clickable as a link?

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Change navbar color in Twitter Bootstrap

What are some of the common ways to left align some text and right align some other text within a div container in bootstrap?

e.g.
    
    Total cost                   $42

Above total cost should be left aligned text and $42 is right aligned text

Content Type	Original Author	Original Content on Stackoverflow
Question	SiberianGuy	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	Jinpu Hu	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	Sadegh-khan	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	Jufrench	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	Andres Ilich	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Tinsae	View Answer on Stackoverflow
Solution 6 - Twitter Bootstrap	Lenin Santiago	View Answer on Stackoverflow

Bootstrap center heading

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

Solution 6 - Twitter Bootstrap

comparing sbt and Gradle

How to check if JavaScript object is JSON

Attributions