PepperBoy PepperBoy - 2 years ago 121
HTML Question

align html elements one after the other

I have two dropdown lists in the jsbin below. How can I align them one after the other, and align them towards the center of the page, with sufficient space between the two html elements, without hardcoding spaces, using  

Also, my bootstrap jumbotron header doesn't span the entire page.
I have tried to do it using the following, however, it still leaves a space at the left.

<div class="jumbotron" style="width: 1600px;">

EDIT : I have tried the code changes suggested below. I am able to get the jumbotron to be full width now, however, the dropdownlists are quite different to what I see in your jsbins. Please see screenshot below.

enter image description here

Answer Source

Take a look at the following JSBin:,css,output

I am not sure what you mean by align after one another. Do you mean inline or on the next line? If you want inline then you need to remove the <br> between the two select elements and display: inline-block;.

Your Jumbotron doesn't extend the full width because its container has some padding as well. Remove the padding and set the width of the container and the jumbotron to 100%;

In order to get the form to align center, you need to increase the width of it to 100% of the window and then text-align:center it.


.jumbotron {
 padding-top: 0%;
 padding-bottom: 0%;


body {
  background: url('') no-repeat center center;
  /*opacity: 0.2;*/
  background-size: cover;


form select{
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download