JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <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 class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#content1">Home</a></li>

            <li><a href="#content2">About</a></li>

            <li><a href="#content3">Contact</a></li>

            <li><a href="#content4">Portfolio</a></li>



          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </div>



    <!-- Begin page content -->

    <div class="container">



		<div class="container">



		</div>
        
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <img src="http://placehold.it/931x754"  alt="..." class="img-responsive img-rounded" />
            </div>
            <div class="col-xs-6 col-md-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-xs-4 col-md-4">
                            =>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <input type="text" class="form-control"/>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            Text Here
                        </div>
                   ...

CSS

.content{height:100vh}

			#content1{background:#fff}

			#content2{background:#fff}

			#content3{background:#fff}

			.img-container1 { float:left; height:60% !important; width:30%}

.text-container { float: left; width: 20%;  } 

.another-container { float: left; width: 20%;  } 

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 7% !important;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

#footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}