# bootstrap
cssをあてるのに、bootstrapをインストールしましょう。
bootstrapとは最も人気のあるCSSフレームワークで、直感的なclass名をつけることで、簡単にcssをあてることができます。
```bash
npm install bootstrap
```
現在作成しているReactアプリでは、`src`ディレクトリ配下に`App.css`と`index.css`があるかと思います。`App.css`に関しては、`App.tsx`にてimportしていたのですが、削除したのでファイルを削除しましょう。index.cssに関しては、`main.tsx`にてimportされているかと思います。このようにimportすすることでcssを当てることでき、main.tsxでimportしているものはページ全体で適応されるものなので、**グローバルcss**といいます。今回は使用しないので、こちらの記述を削除し、代わりにbootstrapをimportしましょう。
{% code title="main.tsx◎" %}
```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "bootstrap/dist/css/bootstrap.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
{% endcode %}
上記にてbootstrapを使用できるようになりました。
次に新たなComponentを作成しましょう。
`src`配下に`components`ディレクトリを作成します。実務では基本的に`components`配下にComponentを格納していきます。
`components`配下に`Breadcrumb.tsx`を作成します。
このコンポーネントをbootstrapにてスタイリングしていくのですが、bootstrapは以下のURLにアクセスして、左側にさまざまな部品やレイアウトの名称が表示され、クリックすると、各部品やレイアウトのCSSの当て方を確認することができます。
{% embed url="" %}
今回は、以下のページのBreadcrumbを利用します。
{% embed url="" %}
こちらを参考に`Breadcrumb.tsx`を以下のように記述しましょう。
{% code title="Breadcrumb.tsx◎" %}
```tsx
export const Breadcrumb = () => {
return (
);
};
```
{% endcode %}
エディタにて確認すると、classの部分にてエラーになっているかと思います。理由として、`tsx`でタグにクラス名をつける場合は、`class`ではなく`className`とつけることになっています。
上記のclassをclassNameに修正しましょう。
export const Breadcrumb = () => {
return (
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
<li className="breadcrumb-item">
<a href="#">Home</a>
</li>
<li className="breadcrumb-item">
<a href="#">Library</a>
</li>
<li className="breadcrumb-item">
<a href="#">Date</a>
</li>
</ol>
</nav>
);
};
作成したBreadcrumbコンポーネントをApp.tsxにて`import`しましょう。
{% code title="App.tsx◎" %}
```tsx
import { UserDetail } from "./UserDetail";
import { Breadcrumb } from "./components/BreadCrumb";
const App = () => {
return (
);
};
export default App;
```
{% endcode %}
上記修正にてブラウザで確認すると、以下のように表示されているかと思います。
このように、bootstrapを導入することで、class名に特定の名前を与えることで、いい感じのcssを当てることができます。