bootstrap CSS issue,

Question

User450763225 posted

Hi, I am trying to create multi-step form with bootstrap, I changed the list css a bit, however, it seemed that the buttons went to wrong position.

I attached the correct position and incorrect position pictures, and css code.

Please advise.

ul {
    padding: 0;
    margin: 0;
    clear: both;
  }
  
  li{
    list-style-type: none;
    list-style-;
    padding: 10px;
    float: left;
  }
  
  input[type="checkbox"]:disabled + label {
    border: 1px solid white;
    color: white;
    background-color: red;
  }

  input[type="checkbox"]:not(:checked), 
  input[type="checkbox"]:checked {
    ;
    left: -9999%;
  }
  
  input[type="checkbox"] + label {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    border: 1px solid black;
    color: black;
    background-color: white;
    margin-bottom: 1px;
  }
  
  input[type="checkbox"]:checked + label {
    border: 1px solid white;
    color: white;
    background-color: green;
  }
  input{ 
    text-align: center; 
}


/*form css*/
form_main {
  width: 100%;
}
.form_main h4 {
  font-family: roboto;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 15px;
  margin-top: 20px;
  text-transform: uppercase;
}
.heading {
  border-bottom: 1px solid #fcab0e;
  padding-bottom: 9px;
  ;
}
.heading span {
  background: #9e6600 none repeat scroll 0 0;
  bottom: -2px;
  height: 3px;
  left: 0;
  ;
  width: 75px;
}   
.form {
  border-radius: 7px;
  padding: 6px;
}

Answer 1

User303363814 posted

Make a sample page.  Put some typical html in it. We don't need to see you entire application.  Just enough html to demonstrate the problem layout.  Put the css in a style element in the head of the page.  Post the sample page here so that anyone can open it.

Tell us what you would like the  result to look like (you didn't actually tell us which of your two pictures was good and which was bad!)