Positioning elements using Bulma CSS

Question

I am trying to horizontally center some text with the search bar using Bulma CSS, but it didn't work out the way I wanted. I tried using columns, but they are usually pulled all the way over at the edge or not placed properly. I also tried using levels but they also had similar results that I didn't want. Please help.

Here is my code:

  <div class="container section">
**<p> I want to make this tag to be in the same line as the search box </p>**
                 <div class="field has-addons is-pulled-right">
                    <div class="control">
                    <input class="input" type="text" placeholder="Search competition">
                      </div>
                   <div class="control">
                    <a class="button is-info">
                        Search
                    </a>
                </div>
            </div>
        </div>

I want to have some text aligned to the left of the container and the search box located on the opposite right side of the row. Thank you.

Answer 1

Can you describe what issues you were having with the columns? Did you try using the .is-vcentered class on the .columns div?

Make sure to view the following code in a full screen.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
  <div class="columns is-vcentered">
    <div class="column">
      <p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
    </div>
    <div class="column">
      <div class="field has-addons is-pulled-right">
        <div class="control">
          <input class="input" type="text" placeholder="Search competition">
         </div>
         <div class="control">
            <a class="button is-info">
                        Search
             </a>
         </div>
       </div>
    </div>
  </div>
</div>

OR I see that you said horizontally centered. Did you try the .is-centered class on the .columns container and the .is-narrow class on the .columns?

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
  <div class="columns is-centered is-vcentered">
    <div class="column is-narrow">
      <p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
    </div>
    <div class="column is-narrow">
      <div class="field has-addons">
        <div class="control">
          <input class="input" type="text" placeholder="Search competition">
         </div>
         <div class="control">
            <a class="button is-info">
                        Search
             </a>
         </div>
       </div>
    </div>
  </div>
</div>