need search boxes aligned side by side on my webpage-CodePudding

Is there html/css code that can let me put some search boxes side by side instead of one below the other? They are around 12 boxes and I want to put 3 below each other in 4 columns. Can it be done by bootstrap?

ps. I'm not familiar with frontend frameworks and stuff.

CodePudding user response：

You should read the documentation first, before asking as this is one of the simplest things though I have written it down for you so that you can understand it.

As you described in your query 3 rows and 4 columns. We know that there are 12 columns in a row so we can divide each division with col-3 that is giving 3 units of width to a box and apply the same row 3 number of times to get your desired result.

<div >
    <div >
        <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
      </div>  
      <div >
        <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
      </div>  
      <div >
        <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
          <div >
            <h1>...</h1>
          </div>
      </div>

CodePudding user response：

You can also go with using tables in bootstrap. Much cleaner.

<table >
  <tbody>
    <tr>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
    </tr>
    <tr>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
    </tr>
    <tr>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
      <td>Your content</td>
    </tr>
  </tbody>
</table>