Search code examples
htmlcsstwitter-bootstrappre

Html Bootstrap multiple <pre> in one line without spacing

I need to put three PRE elements in a row without spacing between them using Bootstrap. I can put them in a row with space with following code:

<div class="row">
<div class="col-md-4"><pre>*   Red
*   Green
*   Blue</pre></div>
<div class="col-md-4"><pre>+   Red
+   Green
+   Blue</pre></div>
<div class="col-md-4"><pre>-   Red
-   Green
-   Blue</pre></div>
</div>

This is what I get: my screenshot

I tried to put "no-space" class to div's, to pre's but that didn't help. Please help! I don't have any ideas how to do it...

Solution

  • Just put the col-classes on the pre tags themselves

    <div class="row">
<pre class="col-md-4">*   Red
*   Green
*   Blue</pre>
<pre class="col-md-4">+   Red
+   Green
+   Blue</pre>
<pre class="col-md-4">-   Red
-   Green
-   Blue</pre>
</div>