引導圖像顯示

Question

/* GLOBAL STYLES 
 
-------------------------------------------------- */ 
 

 
/* Padding below the footer and lighter body text */ 
 

 
body { 
 
    background-color: #a6a6a6; 
 
    padding-bottom: 40px; 
 
    color: #5a5a5a; 
 
} 
 
/* CUSTOMIZE THE NAVBAR 
 
-------------------------------------------------- */ 
 

 
/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
 

 
.navbar-wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 20; 
 
} 
 
/* Flip around the padding for proper display in narrow viewports */ 
 

 
.navbar-wrapper > .container { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-wrapper .navbar { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 
.navbar-wrapper .navbar .container { 
 
    width: auto; 
 
} 
 
/* PORTFOLIO PAGE CSS 
 
---------------------------------------------------*/ 
 

 
.css-img div { 
 
    display: inline-block; 
 
} 
 
/* RESPONSIVE CSS 
 
-------------------------------------------------- */ 
 

 
@media (min-width: 768px) { 
 
    /* Navbar positioning foo */ 
 
    .navbar-wrapper { 
 
    margin-top: 20px; 
 
    } 
 
    .navbar-wrapper .container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    } 
 
    .navbar-wrapper .navbar { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    } 
 
    /* The navbar becomes detached from the top, so we round the corners */ 
 
    .navbar-wrapper .navbar { 
 
    border-radius: 4px; 
 
    } 
 
    .nav { 
 
    margin-bottom: 0; 
 
    padding-left: 0; 
 
    list-style: none; 
 
    } 
 
    .nav > li { 
 
    position: relative; 
 
    display: block; 
 
    } 
 
    .nav > li > a { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    } 
 
    .nav > li > a:hover, 
 
    .nav > li > a:focus { 
 
    text-decoration: none; 
 
    background-color: #eeeeee; 
 
    } 
 
    .nav > li.disabled > a { 
 
    color: #777777; 
 
    } 
 
    .nav > li.disabled > a:hover, 
 
    .nav > li.disabled > a:focus { 
 
    color: #777777; 
 
    text-decoration: none; 
 
    background-color: transparent; 
 
    cursor: not-allowed; 
 
    } 
 
    .nav .open > a, 
 
    .nav .open > a:hover, 
 
    .nav .open > a:focus { 
 
    background-color: #eeeeee; 
 
    border-color: #337ab7; 
 
    } 
 
    .nav .nav-divider { 
 
    height: 1px; 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #e5e5e5; 
 
    } 
 
    .nav > li > a > img { 
 
    max-width: none; 
 
    } 
 
    .navbar { 
 
    position: relative; 
 
    min-height: 50px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid transparent; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar { 
 
     border-radius: 4px; 
 
    } 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-header { 
 
     float: left; 
 
    } 
 
    } 
 
    .navbar-collapse { 
 
    overflow-x: visible; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    border-top: 1px solid transparent; 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    -webkit-overflow-scrolling: touch; 
 
    } 
 
    .navbar-collapse.in { 
 
    overflow-y: auto; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-collapse { 
 
     width: auto; 
 
     border-top: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: block !important; 
 
     height: auto !important; 
 
     padding-bottom: 0; 
 
     overflow: visible !important; 
 
    } 
 
    .navbar-collapse.in { 
 
     overflow-y: visible; 
 
    } 
 
    .navbar-fixed-top .navbar-collapse, 
 
    .navbar-static-top .navbar-collapse, 
 
    .navbar-fixed-bottom .navbar-collapse { 
 
     padding-left: 0; 
 
     padding-right: 0; 
 
    } 
 
    } 
 
    .navbar-fixed-top .navbar-collapse, 
 
    .navbar-fixed-bottom .navbar-collapse { 
 
    max-height: 340px; 
 
    } 
 
    @media (max-device-width: 480px) and (orientation: landscape) { 
 
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { 
 
     max-height: 200px; 
 
    } 
 
    } 
 
    .container > .navbar-header, 
 
    .container-fluid > .navbar-header, 
 
    .container > .navbar-collapse, 
 
    .container-fluid > .navbar-collapse { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { 
 
     margin-right: 0; 
 
     margin-left: 0; 
 
    } 
 
    } 
 
    .navbar-brand { 
 
    float: left; 
 
    padding: 15px 15px; 
 
    font-size: 18px; 
 
    line-height: 20px; 
 
    height: 50px; 
 
    } 
 
    .navbar-brand:hover, 
 
    .navbar-brand:focus { 
 
    text-decoration: none; 
 
    } 
 
    .navbar-brand > img { 
 
    display: block; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { 
 
     margin-left: -15px; 
 
    } 
 
    } 
 
    .navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    margin-right: 15px; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    } 
 
    .navbar-toggle:focus { 
 
    outline: 0; 
 
    } 
 
    .navbar-toggle .icon-bar { 
 
    display: block; 
 
    width: 22px; 
 
    height: 2px; 
 
    border-radius: 1px; 
 
    } 
 
    .navbar-toggle .icon-bar + .icon-bar { 
 
    margin-top: 4px; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-toggle { 
 
     display: none; 
 
    } 
 
    } 
 
    .navbar-nav { 
 
    margin: 7.5px -15px; 
 
    } 
 
    .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    line-height: 20px; 
 
    } 
 
    @media (max-width: 767px) { 
 
    .navbar-nav .open .dropdown-menu { 
 
     position: static; 
 
     float: none; 
 
     width: auto; 
 
     margin-top: 0; 
 
     background-color: transparent; 
 
     border: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a, 
 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
 
     padding: 5px 15px 5px 25px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a { 
 
     line-height: 20px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
     background-image: none; 
 
    } 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-nav { 
 
     float: left; 
 
     margin: 0; 
 
    } 
 
    .navbar-nav > li { 
 
     float: left; 
 
    } 
 
    .navbar-nav > li > a { 
 
     padding-top: 15px; 
 
     padding-bottom: 15px; 
 
    } 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <title>Carousel Template for Bootstrap</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <!-- link href="css/bootstrap.min.css" rel="stylesheet" --> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="portfolio.css" rel="stylesheet"> 
 

 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 
<!-- NAVBAR 
 
================================================== --> 
 

 
<body> 
 
    <div class="navbar-wrapper"> 
 
    <div class="container"> 
 

 
     <nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="index.html">Home</a> 
 
       </li> 
 
       <li><a href="about.html">About</a> 
 
       </li> 
 
       <li class="active"><a href="portfolio.html">Portfolio</a> 
 
       </li> 
 
       <li><a href="contact.html">Contact</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li><a href="#">One more separated link</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav> 
 

 
     <div class="css-img"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <hr class="featurette-divider"> 
 

 
     <!-- FOOTER --> 
 
     <footer> 
 
     <p class="pull-right"><a href="#">Back to top</a> 
 
     </p> 
 
     <p>&copy; 2015 Company, Inc.</p> 
 
     </footer> 
 

 
    </div> 
 
    </div> 
 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script> 
 
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>') 
 
    </script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- Just to make our placeholder images work. Don't actually copy the next line! --> 
 
    <script src="../../assets/js/vendor/holder.min.js"></script> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
 
</body> 
 

 
</html>

我建立一個模板，這樣我可以創建一個WordPress主題，並希望我的投資組合爲水平和垂直不上顯示的圖像就像他們現在。我設置div顯示內聯塊，它一直在工作，直到我在標題下面添加文本。我怎樣才能解決這個問題？我可能不得不重新發布這個，因爲它不會讓我將核心Bootstrap代碼添加到小提琴而不給我一個警告。所以我的頭文件丟失了代碼，它在這裏可以正常工作，但它對我所用的所有Bootstrap文件都能正常工作。

Answer 1

您正在將每個col-md-*放置在單獨的row中。當然，Bootstrap rows是垂直堆疊的。

您應該將所有col-md-* s放在一個row中。

Answer 2

使標題div浮動：left並從.ccs-img div規則中刪除嵌入塊將解決您的問題。

/* GLOBAL STYLES 
 
-------------------------------------------------- */ 
 
/*NEW*/ 
 
img { 
 
    float: left; 
 
    padding-right: 5px; 
 
} 
 
/* Padding below the footer and lighter body text */ 
 

 
body { 
 
    background-color: #a6a6a6; 
 
    padding-bottom: 40px; 
 
    color: #5a5a5a; 
 
} 
 
/* CUSTOMIZE THE NAVBAR 
 
-------------------------------------------------- */ 
 

 
/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
 

 
.navbar-wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 20; 
 
} 
 
/* Flip around the padding for proper display in narrow viewports */ 
 

 
.navbar-wrapper > .container { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-wrapper .navbar { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 
.navbar-wrapper .navbar .container { 
 
    width: auto; 
 
} 
 
/* PORTFOLIO PAGE CSS 
 
---------------------------------------------------*/ 
 

 
.css-img div { 
 
    
 
} 
 
/* RESPONSIVE CSS 
 
-------------------------------------------------- */ 
 

 
@media (min-width: 768px) { 
 
    /* Navbar positioning foo */ 
 
    .navbar-wrapper { 
 
    margin-top: 20px; 
 
    } 
 
    .navbar-wrapper .container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    } 
 
    .navbar-wrapper .navbar { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    } 
 
    /* The navbar becomes detached from the top, so we round the corners */ 
 
    .navbar-wrapper .navbar { 
 
    border-radius: 4px; 
 
    } 
 
    .nav { 
 
    margin-bottom: 0; 
 
    padding-left: 0; 
 
    list-style: none; 
 
    } 
 
    .nav > li { 
 
    position: relative; 
 
    display: block; 
 
    } 
 
    .nav > li > a { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    } 
 
    .nav > li > a:hover, 
 
    .nav > li > a:focus { 
 
    text-decoration: none; 
 
    background-color: #eeeeee; 
 
    } 
 
    .nav > li.disabled > a { 
 
    color: #777777; 
 
    } 
 
    .nav > li.disabled > a:hover, 
 
    .nav > li.disabled > a:focus { 
 
    color: #777777; 
 
    text-decoration: none; 
 
    background-color: transparent; 
 
    cursor: not-allowed; 
 
    } 
 
    .nav .open > a, 
 
    .nav .open > a:hover, 
 
    .nav .open > a:focus { 
 
    background-color: #eeeeee; 
 
    border-color: #337ab7; 
 
    } 
 
    .nav .nav-divider { 
 
    height: 1px; 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #e5e5e5; 
 
    } 
 
    .nav > li > a > img { 
 
    max-width: none; 
 
    } 
 
    .navbar { 
 
    position: relative; 
 
    min-height: 50px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid transparent; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar { 
 
     border-radius: 4px; 
 
    } 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-header { 
 
     float: left; 
 
    } 
 
    } 
 
    .navbar-collapse { 
 
    overflow-x: visible; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    border-top: 1px solid transparent; 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    -webkit-overflow-scrolling: touch; 
 
    } 
 
    .navbar-collapse.in { 
 
    overflow-y: auto; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-collapse { 
 
     width: auto; 
 
     border-top: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: block !important; 
 
     height: auto !important; 
 
     padding-bottom: 0; 
 
     overflow: visible !important; 
 
    } 
 
    .navbar-collapse.in { 
 
     overflow-y: visible; 
 
    } 
 
    .navbar-fixed-top .navbar-collapse, 
 
    .navbar-static-top .navbar-collapse, 
 
    .navbar-fixed-bottom .navbar-collapse { 
 
     padding-left: 0; 
 
     padding-right: 0; 
 
    } 
 
    } 
 
    .navbar-fixed-top .navbar-collapse, 
 
    .navbar-fixed-bottom .navbar-collapse { 
 
    max-height: 340px; 
 
    } 
 
    @media (max-device-width: 480px) and (orientation: landscape) { 
 
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { 
 
     max-height: 200px; 
 
    } 
 
    } 
 
    .container > .navbar-header, 
 
    .container-fluid > .navbar-header, 
 
    .container > .navbar-collapse, 
 
    .container-fluid > .navbar-collapse { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { 
 
     margin-right: 0; 
 
     margin-left: 0; 
 
    } 
 
    } 
 
    .navbar-brand { 
 
    float: left; 
 
    padding: 15px 15px; 
 
    font-size: 18px; 
 
    line-height: 20px; 
 
    height: 50px; 
 
    } 
 
    .navbar-brand:hover, 
 
    .navbar-brand:focus { 
 
    text-decoration: none; 
 
    } 
 
    .navbar-brand > img { 
 
    display: block; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { 
 
     margin-left: -15px; 
 
    } 
 
    } 
 
    .navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    margin-right: 15px; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    } 
 
    .navbar-toggle:focus { 
 
    outline: 0; 
 
    } 
 
    .navbar-toggle .icon-bar { 
 
    display: block; 
 
    width: 22px; 
 
    height: 2px; 
 
    border-radius: 1px; 
 
    } 
 
    .navbar-toggle .icon-bar + .icon-bar { 
 
    margin-top: 4px; 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-toggle { 
 
     display: none; 
 
    } 
 
    } 
 
    .navbar-nav { 
 
    margin: 7.5px -15px; 
 
    } 
 
    .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    line-height: 20px; 
 
    } 
 
    @media (max-width: 767px) { 
 
    .navbar-nav .open .dropdown-menu { 
 
     position: static; 
 
     float: none; 
 
     width: auto; 
 
     margin-top: 0; 
 
     background-color: transparent; 
 
     border: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a, 
 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
 
     padding: 5px 15px 5px 25px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a { 
 
     line-height: 20px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
     background-image: none; 
 
    } 
 
    } 
 
    @media (min-width: 768px) { 
 
    .navbar-nav { 
 
     float: left; 
 
     margin: 0; 
 
    } 
 
    .navbar-nav > li { 
 
     float: left; 
 
    } 
 
    .navbar-nav > li > a { 
 
     padding-top: 15px; 
 
     padding-bottom: 15px; 
 
    } 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>Carousel Template for Bootstrap</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="portfolio.css" rel="stylesheet"> 
 

 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 
<!-- NAVBAR 
 
================================================== --> 
 

 
<body> 
 
    <div class="navbar-wrapper"> 
 
    <div class="container"> 
 

 
     <nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="index.html">Home</a> 
 
       </li> 
 
       <li><a href="about.html">About</a> 
 
       </li> 
 
       <li class="active"><a href="portfolio.html">Portfolio</a> 
 
       </li> 
 
       <li><a href="contact.html">Contact</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li><a href="#">One more separated link</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav> 
 

 
     <div class="css-img"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="http://placehold.it/242x200" alt="placeholder image"> 
 
      <div class="caption"> 
 
       <h4>Thumbnail label</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <hr class="featurette-divider"> 
 

 
     <!-- FOOTER --> 
 
     <footer> 
 
     <p class="pull-right"><a href="#">Back to top</a> 
 
     </p> 
 
     <p>&copy; 2015 Company, Inc.</p> 
 
     </footer> 
 

 
    </div> 
 
    </div> 
 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script> 
 
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>') 
 
    </script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- Just to make our placeholder images work. Don't actually copy the next line! --> 
 
    <script src="../../assets/js/vendor/holder.min.js"></script> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
 
</body> 
 

 
</html>