Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



28 Commits

Repository files navigation


Twitter Bootstrap 3.x Clips for Panic Coda 2


  • All resulting html code from these clips is indented with standard tabs. Bootstrap two spaces sucks.
  • Some clips like table + TAB, select + TAB or form + TAB are not included to avoid conflicts because they are already here in coda default clips.

New clips will come soon...


Copy Bootstrap.clips and paste it in the Coda Clips folder:

/Users/[OSX Username]/Library/Application Support/Coda 2/Clips


Starter page

Type bootstrap and press TAB

<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<!-- css -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

	<!--[if lt IE 9]>
		<script src=""></script>
		<script src=""></script>

	<header id="site-header">
	</header><!-- #site-header -->

	<main id="site-content" role="main">
	</main><!-- #site-content -->

	<footer id="site-footer" role="contentinfo">
	</footer><!-- #site-footer -->

	<!-- js -->
	<script src=""></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/script.js"></script>


Grid system

Container div

Type container and press TAB

<div class="container">
</div><!-- .container -->

Container fluid div

Type container-fluid and press TAB

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

Row div

Type row and press TAB

<div class="row">
</div><!-- .row -->

Column xs

Type col-xs and press TAB

<div class="col-xs-">

Column sm

Type col-sm and press TAB

<div class="col-sm-">

Column md

Type col-md and press TAB

<div class="col-md-">

Column lg

Type col-lg and press TAB

<div class="col-lg-">



Type lead and press TAB

<p class="lead">


Type blockquote and press TAB



Table striped

Type table-striped and press TAB

<table class="table table-striped">

Table bordered

Type table-bordered and press TAB

<table class="table table-bordered">

Table hover

Type table-hover and press TAB

<table class="table table-hover">

Table condensed

Type table-condensed and press TAB

<table class="table table-condensed">

Table responsive

Type table-responsive and press TAB

<div class="table-responsive">
	<table class="table">


Inline form

Type inline-form and press TAB

<form class="form-inline">

Horizontal form

Type horizontal-form and press TAB

<form class="form-horizontal">

Form group

Type form-group and press TAB

<div class="form-group">
	<label for=""></label>
	<input type="" class="form-control" id="" name="" placeholder="">


Type checkbox and press TAB

<div class="checkbox">
		<input type="checkbox" name="" id="" value="">


Type radio and press TAB

<div class="radio">
		<input type="radio" name="" id="" value="">

Inline checkbox

Type checkbox-inline and press TAB

<label class="checkbox-inline">
	<input type="checkbox" name="" id="" value=""> 

Inline radio

Type radio-inline and press TAB

<label class="radio-inline">
	<input type="radio" name="" id="" value=""> 

Multiple select

Type select-multiple and press TAB

<select multiple class="form-control" name="">
	<option value=""></option>
	<option value=""></option>


Default button

Type btn-default and press TAB

<a href="" class="btn btn-default"></a>

Primary button

Type btn-primary and press TAB

<a href="" class="btn btn-primary"></a>

Success button

Type btn-success and press TAB

<a href="" class="btn btn-success"></a>

Info button

Type btn-info and press TAB

<a href="" class="btn btn-info"></a>

Warning button

Type btn-warning and press TAB

<a href="" class="btn btn-warning"></a>

Danger button

Type btn-danger and press TAB

<a href="" class="btn btn-danger"></a>

Link button

Type btn-link and press TAB

<a href="" class="btn btn-link"></a>


Responsive image

Type img-responsive and press TAB

<img class="img-responsive" src="" alt="">

Rounded image

Type img-rounded and press TAB

<img class="img-rounded" src="" alt="">

Circle image

Type img-circle and press TAB

<img class="img-circle" src="" alt="">

Thumbnail image

Type img-thumbnail and press TAB

<img class="img-thumbnail" src="" alt="">


Type navbar and press TAB

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			<a class="navbar-brand" href="#"></a>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Link</a></li>
		</div><!-- .navbar-collapse -->
	</div><!-- .container-fluid -->
</nav><!-- .navbar -->



Type pagination and press TAB

	<ul class="pagination">
			<a href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
			<a href="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>

Alert success

Type alert-success and press TAB

<div class="success alert-success" role="alert"></div>

Alert info

Type alert-info and press TAB

<div class="alert alert-info" role="alert"></div>

Alert warning

Type alert-warning and press TAB

<div class="alert alert-warning" role="alert"></div>

Alert danger

Type alert-danger and press TAB

<div class="alert alert-danger" role="alert"></div>


Type panel and press TAB

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title"></h3>
	<div class="panel-body">


Type accordion and press TAB

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a>
		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				Panel 1 body....
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingTwo">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a>
		<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
			<div class="panel-body">
				Panel 2 body....
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingThree">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a>
		<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
			<div class="panel-body">
				Panel 3 body....
</div><!-- .panel-group -->


Type breadcrumb and press TAB

<ol class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Library</a></li>
	<li class="active">Data</li>


Type carousel and press TAB

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="" alt="">
			<div class="carousel-caption">
				Caption 1
		<div class="item">
			<img src="" alt="">
			<div class="carousel-caption">
				Caption 2
		<div class="item">
			<img src="" alt="">
			<div class="carousel-caption">
				Caption 3
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
</div><!-- .carousel -->


Bootstrap Clips for Panic Coda 2







No releases published