bootstrap format json

Language: Bootstrap and JSON

To format JSON data in Bootstrap, you can use the pre tag to preserve the formatting and the json class to apply the appropriate styling. Here's an example:

<pre class="json">
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}
</pre>

This will display the JSON data with proper indentation and syntax highlighting.

If you want to dynamically generate JSON data in Bootstrap, you can use JavaScript or a server-side language to generate the JSON object and then use the JSON.stringify() function to convert it to a string. You can then insert the string into the HTML using JavaScript or a templating engine.

Here's an example using JavaScript:

<script>
  var data = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
  };

  var jsonString = JSON.stringify(data, null, 2);

  document.getElementById("jsonContainer").innerText = jsonString;
</script>

<pre class="json" id="jsonContainer"></pre>

This code creates a JavaScript object data, converts it to a JSON string using JSON.stringify(), and then inserts the string into the pre element with the id "jsonContainer".

Remember to include the necessary Bootstrap CSS and JavaScript files in your HTML document for the styling to take effect.

I hope this helps! Let me know if you have any further questions.