Bootstrap positioning really confusing me

1

I’m working on the random quote machine project now, but I’m getting confused by bootstrap. It’s just not doing what I want.

I am trying to move my “new quote” & “tweet this” buttons to be centered, but not smushed together. I know this should be really simple but somehow in the last hour I’ve only achieved giving myself a headache! Anyone able to point me in the right direction?

2 
<div class="row">
  <div class="col-xs-2 col-xs-offset-4">
    <div class="buttons">
      <h3 class="buttonText">New Quote</h3>
    </div>
  </div>

  <div class="col-xs-2 ">
    <div class="buttons">
      <h3 class="buttonText">Tweet this!</h3>
    </div>
  </div>
    
    <div class="col-xs-4">
      </div>

    </div>
3

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

You can’t post raw HTML in the forum, as it renders invisibly.

4

Try this for button


<div class="row">
  <div class="col-xs-2 col-xs-offset-4">
    <div class="buttons">
      <h3 class="buttonText">New Quote</h3>
    </div>
  </div>

  <div class="col-xs-2 ">
    <div class="buttons">
      <h3 class="buttonText">Tweet this!</h3>
    </div>
  </div>
    
    <div class="col-xs-4">
      </div>

  </div>
5

The best thing to do is review the Bootstrap documentation.

Bootstrap Grid system

1 Like
6

That’s because you’re using the col-xs- set of classes. ‘xs’ is for the smallest screens so if you say ‘separate this row in 2 columns if the screen is very small’ it will follow those rules and if the button or text is larger they will be squished together. You can either set a min-width or adjust your col-xs for small screens and put an additional class col-sm-n (n is the number like in col-xs) for the not so small and larger.

Media queries are another alternative if you know how to use them.

1 Like
7

That did exactly what I needed it to, thanks mate :slight_smile:

And thank you to the others who also contributed, much appreciated!