jenlee123
Reputation: 153
How do I place sections next to each other in Bootstrap?
Hey I am trying to modify this bootstrap page http://127.0.0.1:5500/html/blue-index.html like this 
. I am trying the blog section and the team section next to each other. Any idea how to do that? I am a beginner in Bootstrap so I dont know how to do this basic stuff. Thanks so much in advance for any advices
enter code here
<!-- ***** Blog Start ***** -->
<section class="section white padding-bottom-80" id="blog">
<div class="container">
<!-- ***** Section Title Start ***** -->
<div class="row">
<div class="col-lg-12">
<div class="center-heading">
<h2 class="section-title">Latest Blog Posts</h2>
</div>
</div>
<div class="offset-lg-3 col-lg-6">
<div class="center-text">
<p>Donec vulputate urna sed rutrum venenatis. Cras consequat magna quis arcu elementum, quis congue risus volutpat.</p>
</div>
</div>
</div>
<!-- ***** Section Title End ***** -->
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/1.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Jirono Expands the Leadership Team with David Lin, Controller</a>
</h3>
<div class="text">
Mauris tellus sem, ultrices varius nisl at, convallis iaculis mauris. Sed eget sem vitae purus tempus dignissim.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/2.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Jirono Partners with Velocloud to Deliver Managed SD-WAN</a>
</h3>
<div class="text">
Cras imperdiet faucibus sem, a dignissim urna feugiat sed. Interdum et malesuada fames ac ante ipsum.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/3.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Corporate IT Solutions Adds Neva as Senior Account Executive</a>
</h3>
<div class="text">
Quisque euismod nec lacus sit amet maximus. Ut convallis sagittis lorem auctor malesuada. Morbi auctor tortor.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
</div>
<!-- ***** Section Title End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Fletch Skinner</h3>
<span>Product Strategist</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Proin arcu ligula, malesuada id tincidunt laoreet, facilisis at justo. Sed at lorem.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/1.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Lance Bogrol</h3>
<span>Visual Designer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Aliquam eget convallis nunc, et porta libero. Etiam velit, lobortis ut tristique.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/2.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Valentino Morose</h3>
<span>Android Developer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Curabitur tristique nec orci quis porta. Aliquam leo justo, auctor eget sapien.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/3.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="user-image">
<img src="assets/images/photos/team/4.jpg" alt="">
</div>
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Giles Posture</h3>
<span>iOS Developer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Nunc posuere lectus ut aliquet facilisis. Nam varius id magna et convallis.</p>
</div>
</div>
</div>
</section>
Upvotes: 0
Views: 111
Answers (1)
Eahiya
Reputation: 1321
I think bellow code helps you,That you want
<!-- ***** Blog Start ***** -->
<section class="section white padding-bottom-80" id="blog">
<div class="container">
<!-- ***** Section Title Start ***** -->
<div class="text-center">
<h2 class="section-title">Latest Blog Posts</h2>
<p>Donec vulputate urna sed rutrum venenatis. Cras consequat magna quis arcu elementum,
quis congue risus volutpat.</p>
</div>
<div class="row">
<div class="col-6">
<!-- ***** Section Title End ***** -->
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/1.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Jirono Expands the Leadership Team with David Lin,
Controller</a>
</h3>
<div class="text">
Mauris tellus sem, ultrices varius nisl at, convallis iaculis mauris. Sed eget sem
vitae
purus tempus dignissim.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/2.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Jirono Partners with Velocloud to Deliver Managed
SD-WAN</a>
</h3>
<div class="text">
Cras imperdiet faucibus sem, a dignissim urna feugiat sed. Interdum et malesuada
fames ac
ante ipsum.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/photos/blog/3.jpg" alt="">
</div>
<div class="blog-content">
<h3>
<a href="blue-blog-single.html">Corporate IT Solutions Adds Neva as Senior Account
Executive</a>
</h3>
<div class="text">
Quisque euismod nec lacus sit amet maximus. Ut convallis sagittis lorem auctor
malesuada.
Morbi auctor tortor.
</div>
<a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-6">
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Fletch Skinner</h3>
<span>Product Strategist</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Proin arcu ligula, malesuada id tincidunt laoreet, facilisis at justo. Sed at
lorem.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/1.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Lance Bogrol</h3>
<span>Visual Designer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Aliquam eget convallis nunc, et porta libero. Etiam velit, lobortis ut tristique.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/2.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Valentino Morose</h3>
<span>Android Developer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Curabitur tristique nec orci quis porta. Aliquam leo justo, auctor eget sapien.</p>
</div>
<div class="user-image">
<img src="assets/images/photos/team/3.jpg" alt="">
</div>
</div>
</div>
<!-- ***** Team Item End ***** -->
<!-- ***** Team Item Start ***** -->
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-item">
<div class="user-image">
<img src="assets/images/photos/team/4.jpg" alt="">
</div>
<div class="team-content">
<div class="team-info">
<h3 class="user-name">Giles Posture</h3>
<span>iOS Developer</span>
</div>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
<p>Nunc posuere lectus ut aliquet facilisis. Nam varius id magna et convallis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Upvotes: 1
Related Questions
- Bootstrap positioning elements
- sections in bootstrap colliding with each other
- Sections overlapping Bootstrap 4
- CSS Bootstrap: How to line up items?
- Elements next to each other in div
- Aligning 3 section tags in a row
- Divs layout when using Bootstrap
- Putting Divs Next to each other using bootstrap
- CSS: how to make two sections at the same line?
- Position multiple sections side by side