Question: I had a csv file of my graph data. I imported this data to Neo4j using the Neo4j plugin available for Gephi. Now, I want this data to be exported as a jSON file. How can I do that?

Answer: 
I have the same problem and bootstrap 3 destroys my existing layouts and third party widgets. Here are something things I've tried in order of increasing difficulty and stability.

Easiest Way
===========

*Safe only if you don't use other bootstrap components*

Add the following css after the bootstrap css is loaded:

```
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

```

This will use the `border-box` sizing only for elements within the grid system. This won't work if you have custom widgets within the grid as they would still have `border-box` applied.

More targeted approach
======================

*Safe only if you don't use other bootstrap components*

Alternatively, you could add a custom `col` class to every column div which already have a `col-*-*` applied like so:

```
<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

```

Then use the following css instead:

```
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

```

This works fine if you ONLY need to use the bootstrap grid system in your project. If you intend to use other bootstrap components however, I don't recommend this approach either since other bootstrap components would depend on the `border-box` being set.

Cherry-pick each containing element to fix
==========================================

A still better way would be to just override the box-sizing as `content-box` on a specific parent element for a widget like this:

```
.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

```

This approach offers the best forward compatibility with future bootstrap components, even if it seems to be working for you now.
I used a combination of above solutions to fit my need
(I used only the grid system, everything else was already there)

```
/* *,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="row"],
[class^="row"] * {
  box-sizing:border-box;
}

```

The grid was taking too much margin and padding 
 so i replaced all the 

```
padding-right:15px;
padding-left:15px;
margin-left=-15px;
margin-right=-15px;

```

to(I commented out the margins)

```
.row {
/*  margin-left: -15px;
margin-right: -15px;*/
}

```

and

```
.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

```