Bootstrap Button Group

In our previus post we've learned regarding bootstrap button anw we tend to square measure progressing to learn Bootstrap three Button cluster . for that we've to incorporate some buttons within a div or contener and provides it to classname .btn-group , normaly its a horizontal button cluster

You can read from my website by clicking here

Example:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Now the categories of button cluster
Button Toolbar

You can additionally set of button teams along for making toolbar like read. to make button toolbar simply apply the category .btn-toolbar on its parrant div.

Example:

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">5</button>
        <button type="button" class="btn btn-primary">6</button>
        <button type="button" class="btn btn-primary">7</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">8</button>
    </div>
</div>

Size of Button cluster

There is four style of size out there in bootstrap three button cluster and that they are:
Large Button Group:

to make an oversized size button cluster apply category name .btn-group-lg with category name .btn-group

Example:

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Normal or Medium Button Group:

to make a standard or medium size button cluster apply category name .btn-group

Example:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Small Button Group:

to make alittle size button cluster apply category name .btn-group-sm with category name .btn-group

Example:

<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Extra little Button Group:

to make a additional little size button cluster apply category name .btn-group-xs with category name .btn-group

Example:

<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Justified Button teams

To make a even button cluster or full breadth content button cluster apply category name .btn-group-justified with category name .btn-group on its parrent div.

Example:

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Left</a>
    <a href="#" class="btn btn-primary">Middle</a>
    <a href="#" class="btn btn-primary">Right</a>
</div>

Vertical Button teams

To make a verticle that's one when another on its below button cluster apply category name .btn-group-justified on its parrent div.

Example:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

In this post we've mentioned regarding Bootstrap three Button cluster and hope it'll assist you. and please give your comments to form the location higher and usefull.

Bootstrap Less

Bootstrap Less is used to generate or over right the code on run-time. Once written , the less code is compiled to css either in advance or in run time.

* Bootstrap.less : is the main file which imports all the other and the one user ultimatly compiled.

* variable.less and mixing.less : They are allowes followd as they are dependencies for the rest . the formar contains the same veriables as used on the generated website.

* utilities.less : this is the last file to be imported. In order to the classes to be over right the rest of the style where necessary.

After downloading the bootstrap source code you will find the files inside the packages

To use the bootstrap less user have to download the node.js according to the platform you are going to work from nodejs.org.

now install the node js.

1. open comand window in case of windows,

2. now install grunt-cli using the command npm install -g grunt-cli

3. download and unzip the source code of bootstrap

4. nevigate to the root directory of bootstrap

5. now install by using the command npm install

6. change the code in less to be rewrite menually from the root directory of the downloaded bootatrsp under less/veriable.less.

7. now its time to reganerate the file of dist which will contain the js and style files. for that use the command grunt dist

this will genatate the dist folder again

now you are rady to use the dist folder to be include or use in your webpage.

code inside bootstrap design

Hi, I am  going to show about the bootstrap code writing procedure, ie if we have to show a html or javascript or any other code on browser then we can use the bootstrap code.

Inline

if you have to write some inline code than you have to use  code tag

For example, <code>&lt ; div &gt ;</code> should be show as inline.

User input

If you want to give permission as user can input from keyboard or input devices then user can use 

kbd tag to indicate input that is typically entered via keyboard.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering. user may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. <pre>&lt ;p&gt ;Sample text &lt ;/p&gt ;</pre> 

Variables

 For indicating variables user may use the <var> tag. <var&gty</var&gt = <var&gtm</var&gt<var&gtx</var&gt + <var&gtb</var&gt 

Sample output

 For indicating blocks sample output from a program user may use the <samp&gt tag. <samp&gtThis is a sample output text.</samp&gt 

Hope the post will help you.

Responsive utilities

For a mobile first design botstrap provides us some classes for responsive utilities that is to view or hide in print or web or in a particular device type.

1. Responsive visibility

the class name .visible-*-* for make visible and the first * denots for xs for extra small, sm for small, md, for medium and lg for large devices and the second * denots for the block,inline, or inline-block to make display type.

Ex.

	Extra small devicesPhones (<768px)	Small devicesTablets (≥768px)	Medium devicesDesktops (≥992px)	Large devicesDesktops (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

2. Visible in web and print or Print classes:

By using the classes .visible-print-block, .visible-print-inline, .visible-print-inline-block we can make a tah visible in print only and it will be hide on web

similarly using the class name .hidden-print we can make that particular tag invisible or hidden on print but it will be visible on print.

Ex.

Classes	Browser	Print
.visible-print-block .visible-print-inline .visible-print-inline-block	Hidden	Visible
.hidden-print	Visible	Hidden

Thanks For Reading

Bootstrap Helper Classes

Bootstrap helper class described the text color classes, background color classes , the floating , visibility in print , in only web , cloase button , dropdown icon , Center content blocks, clearfix etc.

1. text color or Contextual colors:

We can make the text color using the clas name .text-muted for deep gray text, .text-primary for blue, .text-success for green, .text-info for deep blue, .text-warning for deep yellow and .text-danger for red.

Ex.

.text-muted for deep gray text

.text-primary for blue

.text-success for green

.text-info for deep blue

.text-warning for deep yellow

.text-danger for red

2. Background color or Contextual backgrounds:

we can give any background color of a html tag bu using the bootstrap provided class name and they are: .bg-primary for deep blue background color , .bg-success for light green background color, .bg-info for sky blue background color , .bg-warning for yellow background color and .bg-danger for red background color of a tag.

Ex.

.bg-primary for deep blue background color

.bg-success for light green background color

.bg-info for sky blue background color

.bg-warning for yellow background color

.bg-danger for red background color

3. cloase icon for modals and alert of bootstrap:

In bootstrap many time we have to use a modal or alert window and a cloase button with that. So bootstrap is providing us a code to make a cloase icon and that is <button type=”button” class=”close” aria-label=”Close”><span aria-hidden=”true”>& times;</span></button>

Ex.

4. Dropdown Icon or Carets:

In a html page many time we have to use a dropdown icon in menu or dropdown listind or so many placess and to create a dropdown icon bootstrap is providing a class to make a dropdown icon and the class name is .caret

Ex.

5. Float left and float right:

In bootstrap there is quick float classes to make a tag float feft or float right and we have to use the class name .pull-left for float left and have to use .pull-right for float right

Ex.

.pull-left class to make the tag float left

.pull-right class to make the tag float right

6. make a blog center or Center content blocks:

in bootstrap we can use .center-block classname to make a block or tag center.

Ex.

.center-block classname to make a block or tag center

7. Clearfix or make horizontaly clear

To clearfix of floating bootstrap providing us a class name .clearfix

Ex.

.clearfix class to make clear floating

8. Showing and hiding and makeing invisible:

By using the class .show to make a tag visible, .hidden to make a tag hide and .invisible to make display none.

Ex.

.show to make a tag visible

.hidden to make a tag hide

.invisible to make display none

9. Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused

10. Replace an element’s text content with a background image.

by using the class name .text-hide  we can replace an element’s text content with a background image.

Bootstrap Forms

Form is a very useful html components which is used for send the data to server via get or post method. Now a days so many users are using mobile for internet browsing so we have to make a form easy to fillup from mobile also .

so bootstrap is given us many classes to make a form in bootstrap.

Inside a form tag we are using the class .form-group as a container of a group of label and field.and using the class form-control in a field to make its width 100%, and in bootstrap the form fields are given some basic property which will automatically work on bootstrap form.

For code and example visit my website

1. Inline form

If we have to sow all the fields and labels in a line then we can use inline form in bootstrap . for that we have to give the class .form-inline in form.

In case of inline form the selest and input are width 100% and the other are width auto.

2. Horizontal form:

In case of horizontal form each form group stays horizontly. to use a horizontal form we can use the class .form-horizontal in a form tag.

Supported controls:

In bootstrap the form components if properly declared then it will automatically take some property inside class .form-control and the form fields are: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Textarea:

As other form fields textarea will have some default property and width 100% when its declared as class .form-control and coder can change the row and column of the textarea by declaring inside the textarea.

Inline checkbox or inline radio

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Checkboxes and radios without label text

Simplly Do not give any label

Selects

Give the class .form-control with a selece tag or dropdown input menu.

Multiple Select

Simply give a multiple attribute with the tag named select.

Static Controll:

Make a value staric in a form give a class name .form-control-static to a html tag inside form group make it static.

Focus state:

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Disable Status:

To make a form field disabled use the attributs disabled.

Disable Fieldset:

To make the total fieldset disabled inside a html tag then used disabled attributs to that html tag

Readonly state

To make a form field Readonly use the attributs readonly.

Block level help text for form controls.

Use help-block to give some helper text inside a form-group

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Form field With optional icons

We can give some bootstrap in initial and in end of the field  and for that we have to use glyphicon

Control sizing

In form controll coader can make the sizing also by giving some class as .input-lg .col-lg-* or input-sm etc.

For code and example visit my website

Bootstrap Buttons

Button is a very important component for any html page. Bootstrap is giving us a very butiful responsive buttons and its working on a tag, input tag, and button tag,

For example and code visit my website

Example:

Link

Options of buttons:

There is some classes to give the color of the button I giving the example one by one.

Default

It will create a default white button. And for that we have to use the class .btn-default with the class .btn

Example: 

Blue Button(Primary Button):

It will make a button color blue. For that we have to use the class .btn-primary with the class .btn

Example: 

Green Button(Success Button):

It will make a button color Green. For that we have to use the class .btn-success with the class .btn

Example: 

Sky Colored Button(Info Button):

It will make a button color Sky Colored. For that we have to use the class .btn-info with the class .btn

Example: 

Yellow Button(Worning Button):

It will make a button color Yellow. For that we have to use the class .btn-worning with the class .btn

Example: 

Red Button(Danger Button):

It will make a button color Red. For that we have to use the class .btn-danger with the class .btn

Example: 

Make a button as Link

To make a button as a link we have to give the class name .btn-link with the class .btn

Example: 

Sizes

Bootstrap is providing verious type of button size they are:

Large Button:

To make a button large using bootstrap we have to use the class .btn-lg with the class btn and btn-default or btn-success etc.

Example: 

Default Button:

For that we does not need the size class of button as its the default size of a bootstrap button

Example: 

Small Button:

To make a button Small using bootstrap we have to use the class .btn-sm with the class btn and btn-default or btn-success etc.

Example: 

Extra Small Button:

To make a button Extra Small using bootstrap we have to use the class .btn-xs with the class btn and btn-default or btn-success etc.

Example: 

Block Level Button:

To make a bootstrap button block level we have to use the class name .btn-block with the class btn and btn-default or btn-success etc and btn-xs btn-lg etc.

Active state

To make a button in active status we have to use the class name .active with the other button classes.

Example: 

Disabled Status:

To make a button disabled we have to use the attribute  disabled=”disabled” in a button or anchor tag with the button classes.

Example: