---
description: '#HelloFront-end #HelloErmine #HelloWorld2021'
---

# Different of Bootstrap in HTML and React

## ความแตกต่างของการใช้ Bootstrap ใน HTML กับ React

{% tabs %}
{% tab title="HTML" %}
ภายใน HTML จะถูกใช้คำว่า class  เป็น Attribute ในการเรียกใช้ CSS

```markup
<div class="container">
<div class="row">
<div class="col-8">8</div>   
<div class="col-4">4</div>   
</div>
```

![](https://lh4.googleusercontent.com/ZaxwjEVfWx9T7FOrOJXRFGCgBsc_dGeWU06-tj1qgbri9HB97k6MEksTMi5wzYtWnZEHBfYESLDpSofg9lgNtr5wZr8h5wtFLnSQclbKRxmKqYQvXtUE7vdAT3QUmwnXmYtt27apJ8M)
{% endtab %}

{% tab title="React" %}
ภายใน React จะถูกใช้คำว่า className เป็น Attribute ในการเรียกใช้ CSS

```markup
<Container>
<Row>
<Col className='col-8'>8</Col>
<Col className='col-4'>4</Col>
</Row>
</Container>
```

![](https://lh3.googleusercontent.com/gHGgSD-6GBAxSPSLp70gn1N65hQ__F-DmVFUklVY464aqJ-iEzRAFOaa6B7M3EeSoCWomSqRsr52JX8A90TI3Yj_4LSfZoD0rPSgQL0Xw8fPsXgxAFNmGwc5g5eAH-9yK4_Mwy7Nepc)
{% endtab %}
{% endtabs %}

## ความแตกต่างของ syntax

ภายใน React จะมี component react ในการใช้ Bootstrap มาให้เป็น prop หากมีตัว Bootstrap ที่ไม่มี prop สามารถใช้ className แทนได้

สามารถเขียนได้ทั้ง component react

```jsx
<Button variant="primary">i am button</Button>
```

หรือ เรียกใช้ className ก็ได้&#x20;

```jsx
<Button className='btn-primary'>i am button</Button>
```

![ผลลัพธ์ด้านบน คือ การใช้ component react ส่วนด้านล่าง คือ className](https://lh6.googleusercontent.com/u8iso9aX69tDv5fatOmFsSuzdS79D3z26RoKx347HEZ5k6b_PcHYetSh01xjoMtXriLRxMD1Y1cBn7_4Fq2b7p0pxTBA8pchSkM3tBsLS9KPvVU3NmK7jiFrHdViNIrsSolEB4K4u6c)

สามารถเขียนได้ทั้ง prop หรือ เรียกใช้ className ก็ได้ แต่หากมี prop ให้ เลือกใช้ prop จะดีกว่า
