COURTESY PATROL

COURTESY PATROL

Statewide Motorist Assistance Patrol program provides employment and training opportunities to tourism-friendly drivers who render assistance to stranded motorists.

SEE MORE
TRAILS & DEVELOPMENT

TRAILS & DEVELOPMENT

Employment, education and training for youth & adults who provide community, beautification, recreational and trail development and improvements throughout the country.

SEE MORE
West Virginia's Arrow to the Summit Community Service Initiative

West Virginia's Arrow to the Summit Community Service Initiative

The Boy Scouts of America selected CCC as the Clearinghouse for “The Initiative”, which was the largest community service and volunteer effort of its kind ever performed in the history of our country.

SEE MORE

A LETTER FROM THE CEO

Dear Visitor: 

Welcome to the Citizens Conservation Corps. We are glad you’re here, and appreciate your interest in our projects and programs!

Click for more.

COURTESY PATROL

Our award winning courtesy patrol sets the standard!

The West Virginia Courtesy Patrol is on duty 7 days a week, 3:00 p.m to 7:00 a.m. Our toll free number is 1-888-359-3683.

Click here for statistics.

CCC ONLINE

Get SOCIAL with us and promote your good work!

Facebook 
Instagram 
Snapchat 
Twitter

WHERE CAN YOU FIND THE CCC?

 

WEST VIRGINIA COURTESY PATROL

WEST VIRGINIA COURTESY PATROL

The award winning motorist assistance patrol program, known as the West Virginia Courtesy Patrol keeps our state's roadways and travelers safe and secure. Drivers and dispatchers assist stranded motorists by patrolling over 800 miles of four-lane highway throughout WV. The tourism-friendly fleet of patrol units also play a vital role in the state's Amber Alert & Homeland Security initiatives. The program has been recognized as a national model for its innovative approach to job creation.

CCC TRAILS & DEVELOPMENT

CCC TRAILS & DEVELOPMENT

The CCC Trails and Development Program (TDP) serves both youth and adults (including veterans) with an emphasis on skills enhancement, educational advancement, civic and community spirit via a wide range of projects and programs throughout the country.

THE INITIATIVE

THE INITIATIVE

West Virginia's ARROW to the Summit Community Service Initiative, The Boy Scouts of America selected CCC as the Clearinghouse for “The Initiative”, which was the largest community service and volunteer effort of its kind ever performed in the history of our country; Completed service projects for over 40,000 Scouts and volunteers over a 5-day period during the 2013 National Jamboree which yielded more than 300,000 volunteer service hours and $5 million economic impact in 9 southern WV counties; Recently selected to coordinate the 2017 Initiative which will include project expansion in all 55 counties.

CCC AmeriCorps Disaster Service Corps

CCC AmeriCorps Disaster Service Corps

The CCC AmeriCorps Disaster Service Corps is headquartered in Twin Branch – McDowell Co. The AmeriCorps program is funded through Volunteer West Virginia and serves southern West Virginia as a state-certified Disaster Service Corps. The CCC Corpsmembers are trained through the American Red Cross and have disaster response experience having already been deployed three times-- Boone County (April 2015), Mineral Wells (September 2015),and Rupert (June 2016).

TWIN BRANCH

TWIN BRANCH

The Twin Branch Recreation Area is an 118-acreage facility under development by CCC. A 10-member AmeriCorps team is currently working at Twin Branch in an effort to improve, further develop, and enhance recreational tourism and economic development opportunities in McDowell County.

BURNING ROCK

BURNING ROCK

Offering over 100 miles of off-road trails for ATV and outdoor enthusiasts of which CCC serves as the conduit by which trail maintenance, building and development efforts occur.

SLIDE

SLIDE

Skiing, Learning, Improving, Developing, and Educating, is a youth development program that utilizes skiing to impact the lives of at-risk youth (ages 3-17) by providing unique and positive experiences that promote character development and life-enhancing values.

THE FIRST TEE OF WEST VIRGINIA

THE FIRST TEE OF WEST VIRGINIA

Utilizing the game of golf as a vehicle to teach core values and healthy habits to kids ages 4 to 17. CCC operates as a partner and sponsor while the day-to-day operations are handled by the West Virginia Golf Association.

CHALLENGED ATHLETES OF WV

CHALLENGED ATHLETES OF WV

CAWV provides a variety of programming to children and adults with disabilities and is the premiere ski program in the Mid-Atlantic Region. CCC serves as both fiscal agent and partner for this elite program.

CCC VETERANS CORPS INITIATIVE

CCC VETERANS CORPS INITIATIVE

In partnership with JP Morgan Chase Foundation, CCC recruits, trains, and places veterans into employment with local governments, federal agencies, businesses, corporations, and/or other avenues with the vision that those served will obtain meaningful employment and the security of sustainable income for themselves and their families.

PILOT INTERNSHIP PROGRAM

PILOT INTERNSHIP PROGRAM

CCC Internship Program has both part-and full-time Corps placements nationwide, aimed to jump start career choices through a variety of experiences focused on civic engagement and service; conservation, environmental, and resource stewardship; and other areas such as--tourism, transportation, interpretative learning, outdoor recreation, information technology, public and governmental relations, green practices, etc. Each CCC Intern is provided access to a range of educational services, from postsecondary education to industry-recognized credentials with an opportunity to earn an AmeriCorps Education Award ranging from $1222.22 to $5775.00.

Let's Move! Outside

Let's Move! Outside

The CCC via The Corps Network is working to place AmeriCorps members in ten (10) YMCA centers across the country; in order to fulfill the Department of Interior’s project “Engaging the Next Generation of Community Coordinators” for the “Let’s Move! Outside” initiative in the following cities: Birmingham, AL; Oklahoma, OK; San Diego, CA; Columbus, OH; Providence, RI; Indianapolis, IN; Wichita, KS; Pittsburgh, PA; Atlanta, GA; and Newark, NJ.

CCC CAREERS

CCC CAREERS

Read more →

RECENT WORK

These are some of our recently completed projects.

view all of our projects →
Heart of the Highlands Trails

Heart of the Highlands Trails

In partnership with Heart of the Highlands Trails, a half mile connector trail from the Town of Davis, WV to the Splash Dam Trail was created.

LATEST POSTS

(view all)
Posted on Jun 05th, 2014
CCC partnered with the Heart of the Highlands Trail System, located in Tucker County, WV, to complete a half mile connector trail from the Town of Davis, WV to the Splash Dam Trail located nearby

OUR MISSION IS TO

  • Conduct Projects and Programs that Strengthen and Revitalize Communities;
  • Provide Self-Esteem, Educational Enhancements, and Employment Opportunities through Meaningful Work Experiences for Youth & Adults; and
  • Conserve, Develop, and Enhance Natural Resources.

Click to learn more.

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

<input type="text" class="form-control" placeholder="Text input">

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

 
<textarea class="form-control" rows="3"></textarea>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Inline checkboxes

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

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Selects

Use the default option, or add multiple to show multiple options at once.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static control

When you need to place plain text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

This email address is being protected from spambots. You need JavaScript enabled to view it.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">This email address is being protected from spambots. You need JavaScript enabled to view it.</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Input focus

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

Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Link functionality of <a> not impacted

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

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.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Optional icons also work on horizontal and inline forms.

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create taller or shorter form controls that match button sizes.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Help text

Block level help text for form controls.

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
SCROLL TO TOP