CODEWITHSUNDEEP
htmltwitter-bootstrap
Rodion
Rodion

Reputation: 350

Select and Label on one row bootstrap

I'm try to set label and select on one row, but it doesn't work not work, i'm also add "col" class, but it's makes it's uneven.

<div class="row">
    <h3>Language </h3>
    <select class="form-control">
        <option value="CSharp">C#</option>
        <option value="CPP">C++</option>
        <option value="XML">XML</option>
        <option value="JavaScript">JavaScript</option>
        <option value="SQL">SQL</option>
        <option value="HTML">HTML</option>
    </select>
</div>

Upvotes: 1

Views: 4181

Answers (4)

black_pottery_beauty
black_pottery_beauty

Reputation: 879

<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
  <div class="col-md-2 col-sm-4 col-xs-4">
    <span>Language </span>
  </div>
  <div class="col-md-8 col-sm-8 col-xs-8">
  <select class="form-control">
        <option value="CSharp">C#</option>
        <option value="CPP">C++</option>
        <option value="XML">XML</option>
        <option value="JavaScript">JavaScript</option>
        <option value="SQL">SQL</option>
        <option value="HTML">HTML</option>
    </select>
  </div>
  </div>

</div>

Using grid this can be done codepen

Upvotes: 0

Bharathi
Bharathi

Reputation: 11

Check this

.col-md-6 > h3 {
    display: inline-block;
    float: left;
  margin: 0 20px 0
}
select.form-control {
    display: inline-block;
    float: left;
    width: 50%;
}
 <div class="row">
        <div class="col-md-6">
        <h3>Language </h3>
        <select class="form-control">
            <option value="CSharp">C#</option>
            <option value="CPP">C++</option>
            <option value="XML">XML</option>
            <option value="JavaScript">JavaScript</option>
            <option value="SQL">SQL</option>
            <option value="HTML">HTML</option>
        </select>
        </div> 
	</div>

Upvotes: 1

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

a quick fix to problem is wrap the select around label

HTML

  <div class="form-group">
    <label>Language 
        <select class="form-control">
            <option value="CSharp">C#</option>
            <option value="CPP">C++</option>
            <option value="XML">XML</option>
            <option value="JavaScript">JavaScript</option>
            <option value="SQL">SQL</option>
            <option value="HTML">HTML</option>
        </select>
    </label>
</div>

CSS

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

example here CODEPEN

enjoy.. :)

Upvotes: 1

Stefan Kert
Stefan Kert

Reputation: 587

You need to soround your form group with a form that has the attribute inline. Also, h3 basically makes a break after the content, you need either to set it to display: inline or in my opinion the better solution would be to use a label.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label>Language </label>
    <select class="form-control">
      <option value="CSharp">C#</option>
      <option value="CPP">C++</option>
      <option value="XML">XML</option>
      <option value="JavaScript">JavaScript</option>
      <option value="SQL">SQL</option>
      <option value="HTML">HTML</option>
    </select>
  </div>
</form>

Upvotes: 4

Related Questions