Bootstrapの仕様の変更方法をご教示いただきたいです。

前提・実現したいこと

rails を使って英単語の学習アプリを作っています。
添付の写真のようにヘッダーとコンテンツの間にマージンがあり、これの削除もしくは無効化の方法があればご教示いただきたいです。
見た目を整えるためにBootstrapをインストールし、
テキストのコンテンツをスライドさせたいと思い、swiperを使いました。

検証してみてみた結果、mb-3とその他の仕様を削除すれば解決しそうなのですが、BootstrapやGemについて理解していないまま使っており、仕様変更方法がわかりません。

発生している問題・エラーメッセージ

CSS,
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Swiper demo</title>
6  <!-- Link Swiper's CSS -->
7  <link rel="stylesheet" href="../package/css/swiper.min.css">
8
9  <!-- Demo styles -->
10  <style>
11    html, body {
12      position: relative;
13      height: 100%;
14    }
15    body {
16      background: #eee;
17      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
18      font-size: 14px;
19      color:#000;
20      margin: 0;
21      padding: 0;
22    }
23    .swiper-container {
24      width: 100%;
25      height: 100%;
26    }
27    .swiper-slide {
28      text-align: center;
29      font-size: 18px;
30      background: #fff;
31
32      /* Center slide text vertically */
33      display: -webkit-box;
34      display: -ms-flexbox;
35      display: -webkit-flex;
36      display: flex;
37      -webkit-box-pack: center;
38      -ms-flex-pack: center;
39      -webkit-justify-content: center;
40      justify-content: center;
41      -webkit-box-align: center;
42      -ms-flex-align: center;
43      -webkit-align-items: center;
44      align-items: center;
45    }
46  </style>
47</head>
48<body>
49  <!-- Swiper -->
50  <div class="swiper-container">
51    <div class="swiper-wrapper">
52      <div class="swiper-slide">
53        <h2>問題1 下記の単語の意味を答えなさい<br />
54        arbitrary</h2>
55
56      </div>
57      <div class="swiper-slide">
58        <h2>意味　<br /><br />
59          Something that's arbitrary seems like <br />
60          it's chosen at random instead of following a consistent rule. <br />
61          Team members would dislike their coach using <br />
62          a totally arbitrary method to pick starting players.</h2></div>
63      <div class="swiper-slide">
64        <h2>解説<br />
65          Even though arbitrary comes from a word meaning "judge" (arbiter), <br />
66          that doesn't mean judges are always fair. <br />
67          Calling a decision-maker arbitrary is usually a negative thing, <br />
68          suggesting the person is making rules based on whim rather than justice. <br />
69          A coach who selects starting players arbitrarily isn't strictly applying a rule<br />
70          ; he could just be picking names out of a hat.</h2></div>
71
72    </div>
73    <!-- Add Pagination -->
74    <div class="swiper-pagination"></div>
75    <!-- Add Arrows -->
76    <div class="swiper-button-next"></div>
77    <div class="swiper-button-prev"></div>
78  </div>
79
80  <!-- Swiper JS -->
81  <script src="../package/js/swiper.min.js"></script>
82
83  <!-- Initialize Swiper -->
84  <script>
85    var swiper = new Swiper('.swiper-container', {
86      pagination: {
87        el: '.swiper-pagination',
88        type: 'progressbar',
89      },
90      navigation: {
91        nextEl: '.swiper-button-next',
92        prevEl: '.swiper-button-prev',
93      },
94    });
95  </script>
96
97</body>
98</html>
99
100

m.ts10806

2020/03/22 09:52

仕様変更はBootstrap自体の話でないのでしたら書き方調整された方が良いかと思います。それに、結局はBoostrapのドキュメントを読んで確認すれば済む話に思います。「どうしたいのか」具体的に書かれないとアドバイスしようがないようにも思います。

行動規範の内容に同意します

回答2件

ベストアンサー

mb-3はmargin-bottomの余白を指定するためのクラスです。
仕様を削除 = CSS側の記述を削除、という意味だと理解しましたが、HTML側のクラス指定を削除するのが正しいです。

以下のような形で、ヘッダーなどのHTMLで、クラスにmb-3クラス指定をしている箇所があれば削除してみてください。

HTML
1変更前: 
2<div class="mb-3">...</div>
3<header class="mb-3">...</header>
4<nav class="mb-3">...</nav>
5
6変更後: 
7<div class="">...</div>
8<header class="">...</header>
9<nav class="">...</nav>