3 col and new

2 replies·opened Feb 25, 2018
W
web404Feb 25, 2018

I have 3 col and i want have news boxs in this col, if i do like this it will be correct ?

          <div class="row">
                    <div class="col-lg-7">111</div>
                    <div class="col-lg-3">222</div>
                    <div class="col-lg-2">333</div>
          </div>

version 1:

<div class="row">
<div class="col-lg-7">
<!-- news -->
						<div class="oc-item">
							<div class="ipost clearfix">
								<div class="entry-image">
									<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
								</div>
								<div class="entry-title">
									<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
								</div>
								<ul class="entry-meta clearfix">
									<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
									<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
									<li><a href="#"><i class="icon-camera-retro"></i></a></li>
								</ul>
								<div class="entry-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
								</div>
							</div>
						</div>
<!-- news -->
<!-- news -->
						<div class="oc-item">
							<div class="ipost clearfix">
								<div class="entry-image">
									<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
								</div>
								<div class="entry-title">
									<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
								</div>
								<ul class="entry-meta clearfix">
									<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
									<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
									<li><a href="#"><i class="icon-camera-retro"></i></a></li>
								</ul>
								<div class="entry-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
								</div>
							</div>
						</div>
<!-- news -->
</div>

<div class="col-lg-3">
<!-- news -->
						<div class="oc-item">
							<div class="ipost clearfix">
								<div class="entry-image">
									<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
								</div>
								<div class="entry-title">
									<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
								</div>
								<ul class="entry-meta clearfix">
									<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
									<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
									<li><a href="#"><i class="icon-camera-retro"></i></a></li>
								</ul>
								<div class="entry-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
								</div>
							</div>
						</div>
<!-- news -->
<!-- news -->
						<div class="oc-item">
							<div class="ipost clearfix">
								<div class="entry-image">
									<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
								</div>
								<div class="entry-title">
									<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
								</div>
								<ul class="entry-meta clearfix">
									<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
									<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
									<li><a href="#"><i class="icon-camera-retro"></i></a></li>
								</ul>
								<div class="entry-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
								</div>
							</div>
						</div>
<!-- news -->
</div>

<div class="col-lg-2">
<!-- news -->
						<div class="oc-item">
							<div class="ipost clearfix">
								<div class="entry-image">
									<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
								</div>
								<div class="entry-title">
									<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
								</div>
								<ul class="entry-meta clearfix">
									<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
									<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
									<li><a href="#"><i class="icon-camera-retro"></i></a></li>
								</ul>
								<div class="entry-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
								</div>
							</div>
						</div>
<!-- news -->
</div>
</div>

Version 2:

<div class="row">
<div class="col-lg-7">
<!-- news -->
						<div class="entry clearfix">
							<div class="entry-image">
								<a href="images/blog/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/full/17.jpg" alt="Standard Post with Image"></a>
							</div>
							<div class="entry-title">
								<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> 10th February 2014</li>
								<li><a href="#"><i class="icon-user"></i> admin</a></li>
								<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
								<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
								<li><a href="#"><i class="icon-camera-retro"></i></a></li>
							</ul>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
								<a href="blog-single.html"class="more-link">Read More</a>
							</div>
						</div>
<!-- news -->
<!-- news -->
						<div class="entry clearfix">
							<div class="entry-image">
								<a href="images/blog/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/full/17.jpg" alt="Standard Post with Image"></a>
							</div>
							<div class="entry-title">
								<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> 10th February 2014</li>
								<li><a href="#"><i class="icon-user"></i> admin</a></li>
								<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
								<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
								<li><a href="#"><i class="icon-camera-retro"></i></a></li>
							</ul>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
								<a href="blog-single.html"class="more-link">Read More</a>
							</div>
						</div>
<!-- news -->

</div>

<div class="col-lg-3">
<!-- news -->
						<div class="entry clearfix">
							<div class="entry-image">
								<a href="images/blog/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/full/17.jpg" alt="Standard Post with Image"></a>
							</div>
							<div class="entry-title">
								<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> 10th February 2014</li>
								<li><a href="#"><i class="icon-user"></i> admin</a></li>
								<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
								<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
								<li><a href="#"><i class="icon-camera-retro"></i></a></li>
							</ul>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
								<a href="blog-single.html"class="more-link">Read More</a>
							</div>
						</div>
<!-- news -->
</div>

<div class="col-lg-2">
<!-- news -->
						<div class="entry clearfix">
							<div class="entry-image">
								<a href="images/blog/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/full/17.jpg" alt="Standard Post with Image"></a>
							</div>
							<div class="entry-title">
								<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> 10th February 2014</li>
								<li><a href="#"><i class="icon-user"></i> admin</a></li>
								<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
								<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
								<li><a href="#"><i class="icon-camera-retro"></i></a></li>
							</ul>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
								<a href="blog-single.html"class="more-link">Read More</a>
							</div>
						</div>
<!-- news -->
</div>
</div>
W
web404Feb 27, 2018

support?

S
SemiColonWebSTAFFFeb 28, 2018

Hello,

Consider using the following code:

<div class="row">
	<div class="col-lg-7">
	<!-- news -->
		<div class="ipost bottommargin clearfix">
			<div class="entry-image">
				<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
			</div>
			<div class="entry-title">
				<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
			</div>
			<ul class="entry-meta clearfix">
				<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
				<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
				<li><a href="#"><i class="icon-camera-retro"></i></a></li>
			</ul>
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
			</div>
		</div>
<!-- news -->
<!-- news -->
		<div class="ipost clearfix">
			<div class="entry-image">
				<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
			</div>
			<div class="entry-title">
				<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
			</div>
			<ul class="entry-meta clearfix">
				<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
				<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
				<li><a href="#"><i class="icon-camera-retro"></i></a></li>
			</ul>
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
			</div>
		</div>
	<!-- news -->
	</div>

	<div class="col-lg-3">
	<!-- news -->
		<div class="ipost bottommargin clearfix">
			<div class="entry-image">
				<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
			</div>
			<div class="entry-title">
				<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
			</div>
			<ul class="entry-meta clearfix">
				<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
				<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
				<li><a href="#"><i class="icon-camera-retro"></i></a></li>
			</ul>
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
			</div>
		</div>
<!-- news -->
<!-- news -->
		<div class="ipost clearfix">
			<div class="entry-image">
				<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
			</div>
			<div class="entry-title">
				<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
			</div>
			<ul class="entry-meta clearfix">
				<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
				<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
				<li><a href="#"><i class="icon-camera-retro"></i></a></li>
			</ul>
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
			</div>
		</div>
	<!-- news -->
	</div>

	<div class="col-lg-2">
	<!-- news -->
		<div class="ipost bottommargin clearfix">
			<div class="entry-image">
				<a href="images/portfolio/full/17.jpg" data-lightbox="image"><img class="image_fade" src="images/blog/grid/17.jpg" alt="Standard Post with Image"></a>
			</div>
			<div class="entry-title">
				<h3><a href="blog-single.html">This is a Standard post with a Preview Image</a></h3>
			</div>
			<ul class="entry-meta clearfix">
				<li><i class="icon-calendar3"></i> 10th Feb 2014</li>
				<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
				<li><a href="#"><i class="icon-camera-retro"></i></a></li>
			</ul>
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
			</div>
		</div>
	<!-- news -->
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard