CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapinput
racunarix
racunarix

Reputation: 193

Creating and styling inputs as part of the sentence in Bootstrap?

I would like to use Bootstrap to create a website for teaching foreign languages. The site tends to be rich in quizzes. I got stuck with creating underlined input fields that fit nicely into the text. I searched Stackoverflow and Google but I haven't found anything useful. The picture below shows the effect I'd like to achieve: an <input> which is styled as a line, and inserted in the middle of sentence. I would then use Java/backend/sth to examine the answer. How can I do that?

Input as line amid sentence

Upvotes: 0

Views: 1606

Answers (2)

Md. Salahuddin
Md. Salahuddin

Reputation: 1072

You can use this approach by using an input field with border bottom only.

You can also use margin right to get similar paragraph under the input field.

<p>1. Herr lang <input type="text" class="borderless_input"> bereits aus dem haus, als der anfur kam</p>
<p>
   <span class="margin_right">a) war</span> 
   <span class="margin_right">(b) ist</span> 
   <span class="margin_right">(c) geht</span> 
   <span>(d) verlasst<span>
</p>


<style type="text/css">
   .borderless_input {
    border-top: none; 
    border-left: none; 
    border-right: none;
   }

   .margin_right { 
     margin-right: 80px;
   }
</style>

Upvotes: 0

VictorySaber
VictorySaber

Reputation: 3164

For the syling of the input box you can do the following. These are inline styles but you can move these out to the CSS file.

<div>
    <div style="margin-bottom: 4px;">
    <label>Herr Lang</label> <input style="background-color: transparent; border-style: solid; border-width: 0px 0px 1px 0px; border-color: darkred;" value="" id="answer1"><label>bereits aus...</label>
    </div>
</div>

JSFiddle is here

Upvotes: 1

Related Questions