In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns:
One column will contain text, while the other will display images that complement the textual content.
Below is the Bootstrap code snippet for the navigation bar:
This is the navigation bar.
<div class = "navbar navbar-default navbar-static-top">
<div class = "container ">
<a href = "# " class = "navbar-brand">levi</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
name = "button" >
<span class = "navbar-toggle-Menu">Menu</span>
</button>
<div class = "collapse navbar-collapse ">
<ul class = "nav navbar-nav navbar-right ">
<li><a href="#"> product</a></li>
<li><a href="#"> price</a></li>
<li><a href = "#">Support</a></li>
<li><a href = "#">Sign In</a></li>
</ul>
</div>
</div>
</div>
The following code demonstrates a 2-column layout setup for each row:
<div class = "container">
<div class = "row">
<div class = "col-sm-6 col-md-6 col-lg-8">
<h3><b>Connect Soft documents</b></h3>
<p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
financial, operational and social behavior of the institution.</p>
</div>
<div class = "col-sm-3">
Image
</div>
</div>
<div class = "row">
<div class = "col-sm-5">
<h3><b>Improve decision models</b></h3>
<p class = "lead">Use statistical modeling to identify patterns and anomalies in the data that can help in
making better decisions.</p>
</div>
<div class = "col-sm-6">
<img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px" class = "pull-right img-responsive imG">
</div>
</div>
<div class = "row">
<div class = "col-sm-6">
<h3><b>Search. Get what is important to You!</b></h3>
<p class = "lead">All notifications and documents are indexed and
archived so that you can find what is needed at all times.</p>
</div>
<div class = "col-sm-6">
</div>
</div>
<div class = "row">
<div class = "col-sm-4">
<h3>Collaborate with other apps!</h3>
<p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
<div class = "col-sm-8">
<img src = "Integrate.jpg" alt = "Integrate" width = "300" height = "300" >
</div>
</div>
</div>
<footer>
<div class = "">
<ul>
<li>Security</li>
</ul>
</div>
</footer>
The desired functionality specifies that on desktop screens, text aligns left and images align right. On screens smaller than 768px, text should be above the image, and the image centered.
For instance:
Desktop: Text | Image
Mobile:
Text
Image
Please refer to my jsfiddle Bootstrap website, which should exhibit the same responsive design as Slack's product page:
Slack's product page