iBird Rose

как вариант расположить уже нарисованные линии png абсолютом и сделать их display: none; а при наведении делать .slideDown() и тогда как раз будет иллюзия того, как будто он рисуется.

ну тк не используй бутсрап именно для этого случая. и сделай сам. через inline-block или float: left;

ну во первых зачем тебе слайдер на чистом css. херня все это. ставь kenwheeler.github.io/slick к примеру
во вторых - проблема твоя в id у радио боксов. вот в этих:

<input type="radio" name="slider" id="slide1" checked="">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">

у обоих слайдеров они должны быть разные

верстальщику должно быть без разницы. любая сетка кастомизируется. а макеты должны определятся в зависимости от дизайна.
к примеру делаешь ты макет нагруженного сайта - ну вот не получается у тебя уместить все задуманное в 1200px - смело делаешь макет на 1300 - и рисуешь дальше. и т.д.
p.s. при адаптации также, но там разрешения должны входить в диапазон популярных разрешений экранов

https://www.iconfinder.com/