<div class="container header">
	<div class="row">
		<div id="messageArea">Battleship</div>
		<div class="input-group input-group-lg">
			<input type="text" class="form-control" id="guessInput" placeholder="Enter a letter and number">
			<span class="input-group-btn">
        <button class="btn btn-default" type="button" id="fireButton">Fire!</button>
      </span>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row title">
		<div class="col-xs-1 col-sm-2">A</div>
		<div class="col-xs-1 col-sm-2">B</div>
		<div class="col-xs-1 col-sm-2">B</div>
		<div class="col-xs-1 col-sm-2">C</div>
		<div class="col-xs-1 col-sm-2">D</div>
		<div class="col-xs-1 col-sm-2">E</div>
	</div>
	<div class="row one">
		<div class="col-xs-1 col-sm-2" id="01"></div>
		<div class="col-xs-1 col-sm-2" id="02"></div>
		<div class="col-xs-1 col-sm-2" id="03"></div>
		<div class="col-xs-1 col-sm-2" id="04"></div>
		<div class="col-xs-1 col-sm-2" id="05"></div>
		<div class="col-xs-1 col-sm-2" id="06"></div>
	</div>
	<div class="row two">
		<div class="col-xs-1 col-sm-2" id="11"></div>
		<div class="col-xs-1 col-sm-2" id="12"></div>
		<div class="col-xs-1 col-sm-2" id="13"></div>
		<div class="col-xs-1 col-sm-2" id="14"></div>
		<div class="col-xs-1 col-sm-2" id="15"></div>
		<div class="col-xs-1 col-sm-2" id="16"></div>
	</div>
	<div class="row three">
		<div class="col-xs-1 col-sm-2" id="21"></div>
		<div class="col-xs-1 col-sm-2" id="22"></div>
		<div class="col-xs-1 col-sm-2" id="23"></div>
		<div class="col-xs-1 col-sm-2" id="24"></div>
		<div class="col-xs-1 col-sm-2" id="25"></div>
		<div class="col-xs-1 col-sm-2" id="26"></div>
	</div>
	<div class="row four">
		<div class="col-xs-1 col-sm-2" id="31"></div>
		<div class="col-xs-1 col-sm-2" id="32"></div>
		<div class="col-xs-1 col-sm-2" id="33"></div>
		<div class="col-xs-1 col-sm-2" id="34"></div>
		<div class="col-xs-1 col-sm-2" id="35"></div>
		<div class="col-xs-1 col-sm-2" id="36"></div>
	</div>
	<div class="row five">
		<div class="col-xs-1 col-sm-2" id="41"></div>
		<div class="col-xs-1 col-sm-2" id="42"></div>
		<div class="col-xs-1 col-sm-2" id="43"></div>
		<div class="col-xs-1 col-sm-2" id="44"></div>
		<div class="col-xs-1 col-sm-2" id="45"></div>
		<div class="col-xs-1 col-sm-2" id="46"></div>
	</div>
	<div class="row six">
		<div class="col-xs-1 col-sm-2" id="51"></div>
		<div class="col-xs-1 col-sm-2" id="52"></div>
		<div class="col-xs-1 col-sm-2" id="53"></div>
		<div class="col-xs-1 col-sm-2" id="54"></div>
		<div class="col-xs-1 col-sm-2" id="55"></div>
		<div class="col-xs-1 col-sm-2" id="56"></div>
	</div>
</div>
@import "compass";
$green: rgb(83, 175, 19);
$grey: rgba(#929292, .25);
body {
	background: #000;
}

.header {
	margin-bottom: 15px;
}

.form-control,
input {
	background: transparent;
	border: $green;
	box-shadow: 0 0 2px $green;
	&:focus {
		box-shadow: 0 0 2px $green;
	}
}

button {
	background-color: $green;
	color: #000;
	&:hover {
		cursor: pointer;
	}
}

#messageArea {
	color: $green;
	font-size: 16px;
	margin: 10px 0;
}

.one,
.two,
.three,
.four,
.five,
.six {
	div {
		border: 2px solid $green;
		min-height: 10vh;
		background: $grey;
	}
}

.title {
	border: none !important;
	color: $green;
	font-size: 16px;
	text-align: center;
}

.hit {
	position: relative;
	&::before {
		content: '\f140';
		font-family: FontAwesome;
		position: absolute;
		left: 50%;
		font-size: 6vh;
		color: $green;
		display: block;
		height: 100%;
	}
}

.miss {
	position: relative;
	display: block;
	height: auto;
	&::before {
		content: '\f00d';
		font-family: FontAwesome;
		position: absolute;
		left: 50%;
		font-size: 6vh;
		color: $green;
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.