How do I adjust the size of a column in React/Bootstrap

Question

<div className={"col-7 name"}>&thinsp;</div>

When this loads into my page, the column is too big. I want to make it more narrow, and if possible, I want to apply an attribute directly inside the div.

What attributes can I add to col-7 name and what is the proper way to do it ?

Does this answer your question? stackoverflow.com/questions/38486660/… — keikai
– keikai, Commented Mar 20, 2020 at 3:22

Al Duncanson · Accepted Answer · 2020-03-21 01:21:03Z

2

Bootstrap's grid system uses 12 columns per row. You specify the column width using the syntax className='col-*'.

Just change the * to the number of columns out of 12 you would like. For example, a div with className='col-6' will be half the width of a div with className='col-12'.

answered Mar 21, 2020 at 1:21

Al Duncanson

83410 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Donald Wu · Accepted Answer · 2020-03-21 05:18:02Z

0

I think you are using bootstrap

total column is 12, so you can use col-12

example:

col-8 for 1 columns, col-4 for 1 columns
col-4 for 3 columns
col-6 for 2 columns

you can try to take a look from their documentation

https://getbootstrap.com/docs/4.4/layout/grid/

answered Mar 21, 2020 at 5:18

Donald Wu

7167 silver badges21 bronze badges

Collectives™ on Stack Overflow

How do I adjust the size of a column in React/Bootstrap

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related