Jump to content
Sign in to follow this  
ianhaney

display data in two columns bootstrap

Recommended Posts

I have a blog on my website and the blogs content is stored in a database. On my home page I have the two recent articles displayed on my home page but I have to change them manually so I add the recent article on the home page in the first column and the second most recent one in the next column so they are side by side. What I want to do is automatically display the blogs image and blog title from the database and display on the home page so I don't have to keep changing it manually

My current code looks like the following

<div class="block">
			<div class="container">
            <h3 class="text-center"><span class="color">Recent Blog Articles</span></h3>
				<div class="row">
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/one-year-to-go-until-end-of-support-for-windows-7">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/blog/windows7-eos-new.jpg" alt="One year to go until end of support for Windows 7">
                            </div>
							<p>One year to go until end of support for Windows 7</p>
                            </a>
						</div>
					</div>
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/windows-10-is-going-to-require-7gb-of-storage-for-future-updates">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/windows-ten-updates-needing-7gb-space-on-hard-drive.jpg" alt="Windows 10 is going to require 7gb of storage for future updates">
                            </div>
							<p>Windows 10 is going to require 7gb of storage for future updates</p>
                            </a>
						</div>
					</div>
					
				</div>
			</div>
		</div>

I did look on Google before posting but could not get my head around how to do it, could anyone point me in the right direction or start me off and will have a go

Share this post


Link to post
Share on other sites

before the start of your html document, query for and retrieve the data you want in the order that you want it, storing the two rows of data in an appropriately named php array variable.

loop over the data at the point in your html document where you want to display the content and output the dynamic parts using php code.

Share this post


Link to post
Share on other sites

Are you using Wordpress by any chance? I asked because you mentioned a blog

Share this post


Link to post
Share on other sites
Just now, Cobra23 said:

Are you using Wordpress by any chance? I asked because you mentioned a blog

No am not using Wordpress

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.