title: Apply Twitter Bootstrap stylings to CodeMirror?
body: <p>I have a form with a textarea where users can write some code. I'm replacing that textarea with a <a href="http://codemirror.net/" rel="noreferrer">CodeMirror</a> code editor box, so I want to apply Bootstrap stylings to it.</p>
  
  <p>This is what the form looks like right now, where all the form elements except the code editor have Bootstrap stylings: <img src="https://i.stack.imgur.com/wxMID.png" alt="enter image description here"></p>
  
  <p>So in particular, I think I need to give the code editor rounded corners, a border, the correct width (input-xxlarge), and blue highlights when mousing over.</p>
  
  <p>How do I do this? Is there a way of doing this besides manually copying over the necessary CSS?</p>
  
  <h1>UPDATE</h1>
  
  <p>I tried copying over the textarea CSS from Bootstrap, and all looks good except the focus CSS when I click inside the code editor. This is what I get:</p>
  
  <p><img src="https://i.stack.imgur.com/5JqOt.png" alt="enter image description here"></p>
  
  <p>The highlight is on the inside, instead of the outside. Any ideas how I fix this?</p>
  
  <p>This is the CSS I added by copying from Bootstrap:</p>
  
  <pre><code>    .CodeMirror {
        line-height: 1.3em;
        font-family: monospace;
  
        /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
        position: relative;
        /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
        overflow: hidden;
        background-color: white;
        width: 530px;
  
        /* Copied from Bootstrap's textarea */
        display: inline-block;
        padding: 4px 6px;
        margin-bottom: 9px;
        color: #555555;
        border: 1px solid #ccc;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
        -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
        -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
        -o-transition: border linear 0.2s, box-shadow linear 0.2s;
        transition: border linear 0.2s, box-shadow linear 0.2s;  
      }
  
      .CodeMirror-focused {
        /* Copied from Bootstrap's textarea */
        border-color: rgba(82, 168, 236, 0.8);
        outline: 0;
        outline: thin dotted \9;
        /* IE6-9 */
  
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
           -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);  
      }
  </code></pre>