2
<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 ?

crptdactyl
  • 39
  • 1
  • 4
  • Does this answer your question? https://stackoverflow.com/questions/38486660/how-to-add-a-classname-id-to-react-bootstrap-component – keikai Mar 20 '20 at 03:22

2 Answers2

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'.

Al Duncanson
  • 743
  • 9
  • 16
0

I think you are using bootstrap

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

example:

  1. col-8 for 1 columns, col-4 for 1 columns

  2. col-4 for 3 columns

  3. col-6 for 2 columns

you can try to take a look from their documentation

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

Donald Wu
  • 698
  • 7
  • 20