CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
BellHopByDayAmetuerCoderByNigh
BellHopByDayAmetuerCoderByNigh

Reputation: 1167

Bootstrap Makes Text Look Like Button

I am utilizing this syntax, but for some reason it makes my text look like it is a button. What I would like is for the text to just appear as text - black text with white background. How can this syntax be altered so that the text does not have the same outlining as a button?

<div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group-addon">Date One:</span>
      <input type="date" name="dateone" />
   </div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group-addon">Date Two:</span>
      <input type="date" name="datetwo" />
      <span class="input-group-btn">
      <input type="submit" name="getthat" value="Show Me Info">
      </span>
   </div>
</div>

And here I also create bootstrap fiddle to show the visual: https://jsfiddle.net/DTcHh/35702/

Upvotes: 0

Views: 808

Answers (3)

Kalaivani M
Kalaivani M

Reputation: 1300

Just change input-group-addon to input-group

<div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group">Date One:</span>
      <input type="date" name="dateone" />
   </div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group">Date Two:</span>
      <input type="date" name="datetwo" />
      <span class="input-group-btn">
      <input type="submit" name="getthat" value="Show Me Info">
      </span>
   </div>
</div>

Working fiddle https://jsfiddle.net/9txv3rfz/

Upvotes: 1

Bhumika Barad
Bhumika Barad

Reputation: 199

try this

  .input-group-addon 
  {
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 0px;
  }

add this class in your css file OR also use class for particular input-group

 .col-md-2  > .input-group > .input-group-addon 
  {
   background-color: #fff;
   border: 0px solid #ccc;
   border-radius: 0px;
  }

Upvotes: 1

Lekens
Lekens

Reputation: 1969

<style>
.input-group-addon_1 {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon_1 {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555;
  text-align: center;

}
</style>
 <div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group-addon_1">Date One:</span>
      <input type="date" name="dateone" />
   </div>
</div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-2 col-xs-2">
   <div class="input-group">
      <span class="input-group-addon_1">Date Two:</span>
      <input type="date" name="datetwo" />
      <span class="input-group-btn">
      <input type="submit" name="getthat" value="Show Me Info">
      </span>
   </div>
</div>

Upvotes: 3

Related Questions