Bootstrap работает не так, как нужно

Скачал с официального сайта бутстрапа css и js, распаковал, поместил в папку вместе с index.html файлом. Сейчас, в этой папке, у меня находятся html файл и папки css и js (содержимое последних двух папок не трогал) Мало того, что колонки все одинаковой ширины, так они еще и плотно прилегают друг к другу (нет отступа) Вот код :

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трёхколоночный макет</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
   [class*="col-"] {
    background-color: #eee;
    border-right: 2px solid #fff;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-xs-3">3 колонки</div>
    <div class="col-xs-5 col-xs-offset-1">5 колонок</div>
    <div class="col-xs-2 col-xs-offset-1">2 колонки</div>
   </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Вот, что мне выдает браузер: Вот, что мне выдает браузер:


Ответы (0 шт):