마지막 alert, grid입니다.

<div class="container">
         <!-- alert 부분 -->
	<div class="alert alert-warning alert-dismissible fade show" role="alert">
	  <a class="alert-link" href="#">튜터 모집!</a> 재능을 나누어봐요.
	  <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"> -->
	  <button type="button" class="close" data-dismiss="alert">	
	  	<!-- 오른쪽 끝에 나타나는 X 아이콘 -->
	    <span aria-hidden="true">&times;</span>
	  </button>
	</div>

	<!-- grid -->
	<div class="row">
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img class="course" src="images/course1.jpg">
		  	<div class="info">
		  		<p>개성있는 일러스트 작품 만들기</p>
		  		<img src="images/user.png">
		  		<span>문종모</span>
		  	</div>
	  	</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course2.jpg">
		  	<div class="info">
		  		<p>내가 만드는 나만의 악세사리</p>
		  		<img src="images/user.png">
		  		<span>하지은</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course3.jpg">
		  	<div class="info">
		  		<p>내 이야기를 노래로!</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>김신의</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course4.jpg">
		  	<div class="info">
		  		<p>비전공자를 위한 웹 프로그래밍</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>손동욱</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course5.jpg">
		  	<div class="info">
		  		<p>자신감 업! 메이크업 클래스</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>황민연</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course6.jpg">
		  	<div class="info">
		  		<p>아이돌 댄스 정복하기</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>박윤석</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course7.jpg">
		  	<div class="info">
		  		<p>사진작가에게 배우는 야외사진</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>이윤수</span>
		  	</div>
		</a>
	  </div>
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img src="images/course8.jpg">
		  	<div class="info">
		  		<p>기본부터 익히는 플라워 클래스</p>
		  		<img src="images/user.png" width="20" height="20">
		  		<span>서혜린</span>
		  	</div>
		</a>
	  </div>
	</div>
</div>

</div>

alert 부분

.alert 는 알림(alert) 메세지를 생성하는 클래스입니다.

.alert-warning 는 alert 클래스 뒤에서 알림 메세지의 배경색과 글자색을 결정하는 8개의 클래스 중 하나입니다.(alert-primary, alert-secondary. alert-success, alert-info, alert-warning, alert-danger, alert-light, alert-dark)

.alert-dismissible 는 알림 메세지를 닫기 위해서 link나 button 요소에 class="close"와 data-dismiss="alert"와 함께 쓰입니다.

.fade 는 알림 메세지가 사라질 때 fade 효과를 주기 위한 클래스입니다.

.show는 알림 메세지가 화면에 보이게 하는 클래스입니다.(show가 없을 경우 visiblity: hidden 과 비슷한 동작을 합니다.)

aria-* attribute(속성)들은 시각장애인을 위한 속성이라 동작과는 상관이 없습니다. 관심있는 분들은 링크를 참조해 보십시오.

× 는 닫는 버튼으로 문자 'x'보다 선호되는 HTML entity입니다.

grid 부분

<div class="container">
	<!-- grid -->
	<div class="row">
	  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
	  	<a class="info-box" href="#">
		  	<img class="course" src="images/course1.jpg">
		  	<div class="info">
		  		<p>개성있는 일러스트 작품 만들기</p>
		  		<img src="images/user.png">
		  		<span>문종모</span>
		  	</div>
	  	</a>
	  </div>

Bootstrap의 grid system은 내용물을 배치하고정렬하기위해 일련의 container, row, cloumn을 사용합니다. grid system은 flexbox로 구성되어 있으면 화면 너비에 완전하게 반응합니다. 한 행(row)은 12개의 열(column)로 이루어져 있습니다.

위의 표를 참고해서 한 행에 12개의 열이 있으므로, small에서는 12개의 열이 1개로, medium에서는 12개의 열이 2개로, large에서는 12개의 열이 3개로, extra large에서는 12개의 열이 4개로 나타나게 하려면 .col-sm-12 .col-md-6, col-lg-4, col-xl-3으로 클래스를 만들면 됩니다.

나머지는 코딩의 민족 코드에서 처럼 만들면 됩니다.

마지막으로 제가 만든 html, css 파일을 올리고 마무리 하겠습니다.

<!DOCTYPE html>
<html>
<head>
	<title>재능공유 사이트</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
</head>
<body>

	<!-- #navbar -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">SHARESKILL</a>
	  <!-- toggle 되는 기준점이 768px Medium 이다. -->
	  <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> -->
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
	  <span class="navbar-toggler-icon"></span>
	  </button>
	  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	    <ul class="navbar-nav">
	      	<li class="nav-item">
	      		<a class="nav-link" href="#">튜터 신청</a>
	      	</li>
		    <li class="nav-item">
	      		<a class="nav-link" href="#">수업 목록</a>
	      	</li>
		</ul>
		<ul class="navbar-nav ml-auto">
		    <li class="nav-item">
	      		<a class="nav-link" href="#">회원가입</a>
	      	</li>
		    <li class="nav-item">
	      		<a class="nav-link" href="#">로그인</a>
	      	</li>
		</ul>
	  </div>
	</nav>


	<!-- .hero-container -->
	<div class=hero-container>		

		<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
		<!-- <div id="carouselIndicators" class="carousel"> -->
		<!-- https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 참고 -->
		  <ol class="carousel-indicators">
		    <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
		    <li data-target="#carouselIndicators" data-slide-to="1"></li>
		    <li data-target="#carouselIndicators" data-slide-to="2"></li>
		  </ol>

		  <div class="carousel-inner">
		    <div class="carousel-item no1 active">
		      <div class="items" alt="First slide">
		      	<h2>음악을 배워보세요</h2>
		      	<p>멋진 뮤지션들이 주변에 있습니다.</p>
		      	<a href="#">수업찾기</a>
		      </div>
		    </div>
		    <div class="carousel-item no2">
		      <div class="items" alt="Second slide">
		      	<h2>메이크업을 배워보세요</h2>
		      	<p>멋진 메이크업 아티스트들이 주변에 있습니다.</p>
		      	<a href="#">수업찾기</a>
		      </div>
		    </div>
		    <div class="carousel-item no3">
		      <div class="items" alt="Third slide">
		      	<h2>요리를 배워보세요</h2>
		      	<p>멋진 요리사들이 주변에 있습니다.</p>
		      	<a href="#">수업찾기</a>
		      </div>
		    </div>
		  </div>


		  <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>


		<div class="container">
			<!-- alert 부분 -->
			<div class="alert alert-warning alert-dismissible fade show" role="alert">
			  <a class="alert-link" href="#">튜터 모집!</a> 재능을 나누어봐요.
			  <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"> -->
			  <button type="button" class="close" data-dismiss="alert">	
			  	<!-- 오른쪽 끝에 나타나는 X 아이콘 -->
			    <span aria-hidden="true">&times;</span>
			  </button>
			</div>

			<!-- grid -->
			<div class="row">
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img class="course" src="images/course1.jpg">
				  	<div class="info">
				  		<p>개성있는 일러스트 작품 만들기</p>
				  		<img src="images/user.png">
				  		<span>문종모</span>
				  	</div>
			  	</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course2.jpg">
				  	<div class="info">
				  		<p>내가 만드는 나만의 악세사리</p>
				  		<img src="images/user.png">
				  		<span>하지은</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course3.jpg">
				  	<div class="info">
				  		<p>내 이야기를 노래로!</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>김신의</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course4.jpg">
				  	<div class="info">
				  		<p>비전공자를 위한 웹 프로그래밍</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>손동욱</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course5.jpg">
				  	<div class="info">
				  		<p>자신감 업! 메이크업 클래스</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>황민연</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course6.jpg">
				  	<div class="info">
				  		<p>아이돌 댄스 정복하기</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>박윤석</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course7.jpg">
				  	<div class="info">
				  		<p>사진작가에게 배우는 야외사진</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>이윤수</span>
				  	</div>
				</a>
			  </div>
			  <div class="col-xl-3 col-lg-4 col-md-6 col-12">
			  	<a class="info-box" href="#">
				  	<img src="images/course8.jpg">
				  	<div class="info">
				  		<p>기본부터 익히는 플라워 클래스</p>
				  		<img src="images/user.png" width="20" height="20">
				  		<span>서혜린</span>
				  	</div>
				</a>
			  </div>
			</div>
		</div>

		</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

body {
	font-family: "Noto Sans KR", sans-serif;
}

#carouselIndicators .carousel-item {
	background-size: cover;
	height: 400px;
	line-height: 400px;
	text-align: center;
}

.carousel-inner .no1 {
	background-image: url(../images/guitar.jpg);
	background-position: left center;
}

.carousel-inner .no2 {
	background-image: url(../images/makeup.jpg);
	background-position: center top;
}

.carousel-inner .no3 {
	background-image: url(../images/cooking.jpg);
	background-position: center center;
}

.items {
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
}

.items h2 {
	margin: 0;
	font-size: 32px;
	color: white;
	margin-bottom: 18px;
	font-weight: 400;
}

.items p {
	margin: 0;
	font-size: 22px;
	color: white;
	margin-bottom: 48px;
}

.items a {
	text-decoration: none;
	font-size: 16px;
	color: white;
	background-color: #5900E7;
	padding:10px 30px;
}

.container {
	margin-top: 50px;
	margin-bottom: 70px;
}

.container .info-box {
	display: block;
	border-radius: 10px;
	margin-bottom: 20px;
	/*padding: 0 15px;*/
	/*grid 기본 패딩이 좌우 15px씩이다.*/
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
	overflow: hidden;
	text-decoration: none;
}

.container .info-box img {
	width: 100%;
}

.container .info {
	padding: 10px;
}

.container .info p {
	margin-bottom: 10px;
	font-size: 18px;
	color: #4a4a4a;
}

.container .info img {
        /*vertical-align: middle;*/
	/*bootstrap scss파일에 설정되어 있어서 불필요한 코드*/
	width: 20px;
	height: 20px;
}
.container .info span {
	font-size: 13px;
	color: #4a4a4a;
	vertical-align: middle;
}