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.

Right below i made a demonstration of each position and how the responsive grid system works.

Modules Positions:

Position "slideshow" (full-width)
Position "user1"
Position "user2"
Position "user3"
Position "user4"
Position "user5"
Position "sidebar_left"
Position "contentuser1"
Main Content
Position "contentuser2"
Position "sidebar_right"
Position "user6"
Position "user7"
Position "user8"
Position "user9"
Position "user10"
Position "footer" (full-width)
 

 

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

  Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
 
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
 
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia arcu eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Curabitur tortor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Sed dignissim lacinia nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Aenean quam. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.

Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Ut fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Nulla facilisi.

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Ut eu diam at pede suscipit sodales.

These examples are images with dynamic css shadow. The shadow is automatically inserted, all these with only one class added to the image's hyperlink.

Shadow - Lifted

<a class="thumbnail has_shadow lifted" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Curled

<a class="thumbnail has_shadow curled" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Perspective

<a class="thumbnail has_shadow perspective" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Raised

<a class="thumbnail has_shadow raised" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Curved

<a class="thumbnail has_shadow curved" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Curved Vertical

<a class="thumbnail has_shadow curved curved-vt-2" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>

Shadow - Curved Horizonal

<a class="thumbnail has_shadow curved curved-hz-1" href="#"><
  img class="img-responsive" src="images/img-06.jpg" alt="" >
</a>
1933

The beginning of the road

Franklin Roosevelt, newly elected President of the United States, looked upon the countryside and was troubled. He saw the wasting away of the nation’s natural resources in the smoldering remains of our once magnificent forests and millions of tons of the richest topsoil swirling around in the Dust Bowl. The other great despair was that of the nation's youth brought on by the Great Depression. They were disheartened with little hope for the future. Roosevelt had a dream. He dreamed of sending hundreds of thousands of young men into the forests and fields to make peace with the environment and with themselves. His dream came true with the creation of the Civilian Conservation Corps (CCC).  The young men who worked for the CCC worked for wages of only one dollar per day. But they worked hard and with pride, happy to be given meaningful employment. Most of them have said of this experience that their time with the CCC was one of the most significant times of their life. The CCC gave these men the chance to learn about themselves, the chance to grow, and the chance to be a part of something beneficial to their country and their spirits.  In West Virginia, the CCC built roads, trails, planted trees and designed many projects, such as, the stonework at Hawks Nest State Park. There were 26 camps in WV. Each camp had 4 or 5 barracks with about 50 boys each. The Dept. of Labor recruited the men; clothing was provided by the Army which also managed the camps. Control of the work was done by the U.S. Forest Service, the U.S. Park Service and others.  The CCC folded in 1942 as the nation’s attention turned to World War II. But such a good idea wouldn’t die. It has lived on in the hearts and minds of those who recognize the vast contribution the CCC made to American society. A quote from historian Arthur Schlesinger Jr. states, “The CCC left monuments in the preservation and purification of the land, the water, and the forests and the young men of America”  
1993

Creation of CCC

While the Citizens Conservation Corps (CCC) is not exactly the same as the CCC of the 1930’s, our mission is the same. We continue to believe that men and women young and old alike can benefit from the experiences provided by our programs. We remain ever focused on the individuals who seek to improve themselves and their communities.  
2013

The Initiative.

The Initiative was a group of community leaders from a 9-county region in southern West Virginia who worked to identify service project initiatives and community service activities in one or more of the following categories: Green-Friendly, Wellness, Construction, Infrastructure, and Arts & Education. The CCC was the Clearinghouse for this massive service component that deployed over 40,000 Scouts and thousands of additional youth volunteers who performed over 300,000 hours of community service over a 5-day period. The Initiative was the largest community service effort of its kind to ever be performed in the history of our country! 
 
SCROLL TO TOP