Bs Input Sizing

-

Bootstrap Input Sizing

Input Sizing inwards Forms

Set the heights of input elements using classes similar .input-lg in addition to .input-sm.
Set the widths of elements using grid column classes similar .col-lg-*and .col-sm-*.

Height Sizing

The next examples shows input elements amongst dissimilar heights:

Example

<form>
  <div class="form-group">
    <label for="inputsm">Small input</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
   <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">Large input</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
</form>
You tin chop-chop size labels in addition to shape controls within a Horizontal form past times adding .form-group-* to the <div class="form-group"> element:

Example

<div class="form-group form-group-lg">
You tin too chop-chop size all inputs in addition to other elements within an .input-group amongst the .input-group-sm or .input-group-lg classes:

Example

<div class="input-group input-group-lg">

Column Sizing

The next examples shows input elements amongst dissimilar widths using dissimilar .col-xs-* classes:

Example

<div class="form-group row">
  <div class="col-xs-2">
    <label for="ex1">col-xs-2</label>
    <input class="form-control" id="ex1" type="text">
  </div>
  <div class="col-xs-3">
    <label for="ex2">col-xs-3</label>
    <input class="form-control" id="ex2" type="text">
  </div>
  <div class="col-xs-4">
    <label for="ex3">col-xs-4</label>
    <input class="form-control" id="ex3" type="text">
  </div>
</div>

Help Text

Use the .help-block flat to add together a block flat assist text inwards forms:

Example

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is about assist text...</span>
</div>

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

Flushing Codeigniter's Cache Or Deleting Caches Inward Codeigniter

-
Image
Enabling together with deleting caches inward Codeigniter is fairly straightforward together with easy. In this post, I am writing near deleting caches. You no longer involve to delete caches manually inward Codeigniter 2.x version. If yous no longer want to cache a file inward Codeigniter yous tin destination take away the cache files. Following are 2 methods to create it. Clearing all cache You tin destination clear the entire cache directory past times calling $this->output->clear_all_cache(); Note: This volition non take away the .htaccess together with index.html files inward the applications/cache folder. //Clears all cache from the cache directory $this->output->clear_all_cache(); This method returns NULL. Clearing a cached path You tin destination clear whatever specified path of its cache past times calling following method. //Clears the cache for the specified path $this->output->clear_path_cache($uri);  This meth...
Read more