Blinking caret inside form - html

Question

I'm looking to add a blinking caret / cursor inside the form in a twitter bootstrap 3 site. There is a codepen for the html and css but I need help on where to add the code, if the code works with bootstrap? I'm new and eager to learn but I have browsed and browsed and got no results.
The codepen is here
http://codepen.io/ArtemGordinsky/pen/GnLBq
html
<span class="blinking-cursor">|</span>
css
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

Answer 1

Simply wrap the input and the blinking icon into a container, then position the blinking icon inside the input.
/* The container */
.input-container {
position: relative;
}
/* Ensure the font-size is the same as the blinking icon */
.input-container input {
border: 1px solid gray;
font-size: 30px;
padding:0 5px;
}
/* Position it where you want. Must be position: absolute! */
.input-container .blinking-cursor {
position: absolute;
left: 5px; /* The same as padding on the input */
}
/* This will hide the blinking cursor when the user clicks on the input */
.input-container input:focus + .blinking-cursor{
visibility: hidden;
}
/* The code below is from the codepen: http://codepen.io/ArtemGordinsky/pen/GnLBq */
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
<div class="input-container">
<input type="text">
<span class="blinking-cursor">|</span>
</div>
You may want to edit the styles further, but this will put you in the direction you're wanting to go.