Bootstrap kłóci się z szablonem strony

Mam pewien prosty szablon HTML, chciałem dodać do niego formularz wykonany w Bootsrapie:
https://codepen.io/jaycbrf/pen/iBszr

Trochę za późno pomyślałem, ale bootsrtap zawiera pliki CSS, które opisują wygląd strony, HTML, BODY itd. i teraz mam problem bo szablon z załączonymi plikami CSS z paczki bootsrtap się kłóci z nim - strona się rozsypuje.

Chcąc wyrzucać kod CSS z paczki od Bootstrapa, za dużo tego jest, jak więc pobrać tylko te elementy z Bootstrapa, które potrzebuję do wyglądu formularza i umieścić w nowym osobnym pliku CSS aby nie załączać wszystkiego co jest z Bootsrtap, ale tylko to co jest mi potrzebne aby ustawić formularz?

Czyli mam taki kawałek kodu HTML:

        <div class="form-group">
  <label class="col-md-4 control-label">E-Mail</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="E-mail adres" class="form-control"  type="text">
    </div>
  </div>
</div>

Teraz aby wyglądało to tak jak na linku, który zapodałem wystarczyłoby skopiować potrzebne elementy CSS z Bootstrap opisujące te elementy HTML, które chcę ostylować i miałbym pożądany wygląd, ale nie wiem jak w prosty sposób wyciągnąć to co jest mi tylko potrzebne. Próbowałem sam, ręcznie jakoś dochodzić do tego, ale i tak czegoś brakuje, coś za dużo i mam wszystko w rozsypce.

A jak nie to muszę stworzyć od 0 proste pola i zapomnieć o Bootstrapie bo zaczyna mi się to wszystko sypać jak się łączy, ale zanim to zrobię pomyślałem zapytać może ktoś to przerabiał i mi coś doradzi może jest jakieś wyjście.

jak ikonki to Bootstrap Glyphicon Components:
http://getbootstrap.com/components/#input-groups

potem input groups:
http://getbootstrap.com/components/#input-groups-sizing

możesz to pobrać oddzielni odhaczając co nie potrzebujesz:
http://getbootstrap.com/customize/
potem na dole compile and download

Możesz poeksperymentować z tym http://getbootstrap.com/customize/, a jak się nie uda to zostaję już chyba tylko Firebug albo inny bliźniaczy tool (ja jak korzystałem z bootstrapa to zrobiłem sobie pliczek i tam nadpisywałem style, które mi rozwalały stronę).

joinAxit napisał(a):

        <div class="form-group">
  <label class="col-md-4 control-label">E-Mail</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="E-mail adres" class="form-control"  type="text">
    </div>
  </div>
</div>

możesz też poszukać ręcznie każdego stylu i go skopiować do nowego arkusza. Szukać musisz w dwóch plikach z tego co pamiętam: bootstrap.css i chyba style.css, szukasz osobno każdego elementu klasy: col-md-4, później control-label itd.
Robota będzie żmudna, efekt niepewny, ale da się zrobić. Koniecznie szukaj każdego wystąpienia frazy, żeby uniknąć braków formatowania dla specyficznych przypadków, jak np.

, itd. Nie pominiesz też w takim przypadku formatowania pod urządzenia mobilne.</p>