Антон Спирин

Почитате про flex, flex-direction, justify-content и align-items.
Пример 1
Пример 2

Не надо использовать bootstrap, он переопределяет стили многих базовых элементов. Ваш виджет быстро стилизовать и без него.
В остальном, для изоляции можно использовать БЭМ. Стили лучше называть с заглавной буквы по названию вашего виджета:

My-Widget__item {

}

и тд. Это должно с 99.9% вероятностью исключить возможные конфликты.

.my-selector ul {
}

.my-selector li {
}

Перевести в SVG

Используйте opacity. Пример

Примерно так:

var videos = [
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4'
];

var nextBtn = document.getElementById("next-btn");
var videoPlayer = document.getElementById("video-player");
var currentVideo = 0;

nextBtn.addEventListener("click", function() {
  currentVideo++;
  if (currentVideo === videos.length) currentVideo = 0;
  videoPlayer.src = videos[currentVideo];
  videoPlayer.play();
});

Добавить правило display: inline-block;

Демо.

Добавьте скрытый input в форму:
<input hidden name="name" value="add" />

Можно так
Кривую в viewBox нужного размера можно сгенерировать любым онлайн генератором, например, тут.

<div class=wrapper>
  <div>Text1</div>
  <div>Text2</div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
}

Разбейте на подзадачи:

gulp.task('watch:article', function(){
  gulp.watch('web/src/style/less/article/**/*.less', ['less:article']); 
});
gulp.task('watch:less', ['watch:article', 'watch:other']);
gulp.task('watch', ['watch:less', 'watch:js']);

решение которое подойдет для любого количества блоков:

.flex-container span + span {
  border-left:1px #cc0000 solid;
}

pointer-events: none;

https://css-tricks.com/svg-sprites-use-better-icon...