Forms and inputs

Styling a form in Bootstrap is also very easy, we just have to add the .form-group class to the container <form> or <div> and the .form-control class to each input-type element:

<h2>{{title}}</h2>
<div class="question-edit">
<div class="form-group">
<label for="text">Question text:</label>
<br />
<textarea id="text"
[(ngModel)]="question.Text"
placeholder="enter a suitable text..."
class="form-control"
></textarea>
</div>

[...]

Jumping to the LESS style sheet file, it won't hurt to increase the height of the text areas-- to increase their overall usability--and also put a limit to the horizontal spanning of some specific elements, such as the right panel (for high-res viewports) and the <select>:

.answer-edit {
width: 80%;

@media (max-width: 767px) {
width: 100%;
}

textarea {
min-height: 100px;
}

select {
max-width: 200px;
}

.commands {
margin-top: 20px;
}
}

That's about it.

If we want to further improve what we've done, or test some more Bootstrap classes, we can always take a look at the official Bootstrap form-styling documentation at the Bootstrap official site:

http://getbootstrap.com/.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.18.101