Codester: Free Responsive Bootstrap Template

Codester: Free Responsive Bootstrap Template
224 Flares 224 Flares ×

Codester: Free Responsive Bootstrap Template

In our last post we have listed responsive grid framework and in the end of the post we mentioned that we will be bringing you a responsive bootstrap template as a freebie. So with keeping the promise today we would like introduce you to our first bootstrap template.

About Bootstrap

Bootstrap is responsive grid framework or say toolkit to fasten the frontend prototyping and also building the production ready web application. It really help out the frontend designer to prototype his responsive web project. In recent days bootstrap has proved to be a complete toolkit to create a beautiful web app faster and easily.

It actually comes up with many add-ons and plugins which makes it interactive, easy to customize, upgradable and flexible enough to extend it to the desired level.

About Codester

Codester is basically a portfolio template for creative people like designers, photographers, graphics artists and more. But with some basic customization you can actually transform this template into your desired website. Codester comes with complete customizable package including latest JavaScript, Scaffolding, Base CSS and Components.

We designed and developed this free template completly on the basics of Bootstrap framework. In includes all the functionality of bootstrap template. Following are some of the features of this template:

  • Responsive design
  • Compatible with all major browsers
  • Compatible with mobile and tablet screen sizes
  • Completely functional Contact form
  • Included search functionality
  • Included search functionality
  • Beautiful portfolio gallery
  • Included Blog layout
  • Beautiful Accordion image slider on home page
  • Flexible
  • Completely customizable.
  • Add-on by Template Monster

Desktop Preview

Free responsive bootstrap template - desktop preview

Iphone, Tablet preview

Free responsive bootstrap template - iPhone and iPad preview

All media preview

Free responsive bootstrap template - All media preview

You can download the template here and that’s also absolutely free! Don’t forget to subscribe us via socials to be updated on our latest articles, useful tutorials, creative freebies and inspirational stuff.

We will be providing partial support for this template for customization. You can post your queries in the comments section below, so that other users also come to know the solution if they face the same issue.
224 Flares Twitter 88 Facebook 93 Google+ 32 LinkedIn 0 Pin It Share 11 224 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him | Twitter | Facebook

Connect with us


    • You will find the demo and download link behind the Twitter follow block.
      You can close it or follow us on twitter to unlock the link.
      Let us know once you successfully see the demo and download links or you find some trouble.

  1. Awesome design cheers.

    I would like to change the images in the main carousel to slide instead of fade, which file would I need to edit to do this?


    • Hello Richard,
      All those carousel to slide switching is handled using the media queries.
      To make the images slide you just have change the min and max media screen
      in css/kwicks-slider.css file.
      Just search and replace this line @media handheld, only screen and (min-width:1300px) with @media handheld, only screen and (min-width:1900px)
      and @media only screen and (max-width:1299px) with @media only screen and (max-width:1899px)
      PS: Considering the screen size 1899px max upto which images will slide and navigation will be visible.

  2. Pingback: Weekly Design News (N.173)

  3. I found this great template you’ve kindly offered for free whilst i was researching Twitter Bootstrap. I understand the whole layout was created using Bootstrap but all the extra functionality, is this something that was added by using custom php & js? This may sound like a very stupid question (forgive me, i’m only just learning web design), but how do i make use of such features, like the blog? Do i need to know php and js or do i need to plug this template into some kind of ‘platform’? Any pointers would be helpful and greatly appreciated, and again, sorry for what may seem like a daft question here.

    • Hello Jason,
      Yes, all the extra features has been added using the custom php and js codes.
      Regarding the blog, you need to convert the template into some CMS theme like WordPress.
      And you are always welcome to ask questions and clear your queries

    • We used the gallery on two pages. Open index.html file and search for img/image-blank.png
      you need to replace this default image with your images.
      Same in the work.html file. Once you updated the link you will see your image.
      Let us know if you find any difficulty.

  4. Great template, thanks a lot.
    But I can’t get the contact form to work. I’ve changed “ownerEmail” to my own but I dont get the form send to it.
    Any ideas?

    • having the same issues.
      please send some insight as how to edit/personalise the contact form for us beginners?

    • Great template, thank you!

      But having issues as to how to personalise the contact form?
      Any help would be much appreciated.

      Thanks again,

  5. Hi, i want to use this bootstrap theme on a tumblr blog, it’s a free blog not hosted. Can i do it this way or not, i am not able to find the answer please guide me through this.


    P.S. – Awesome Template

    • Hello Sahil,
      Yo can use it any way! Do share a link when you are done with your Tumblr blog.
      It will be an inspiration for us :)

      We believe on one thing, and that is “Knowledge must be Open Source!”
      So, go ahead and Best Luck!

  6. Hello. I am trying to add my own input in the contact form. I want only A-Z, 0-9, and underscores.
    That is what I have, but it does not work. Any ideas?

  7. Hi! It’s really helpfull. I’m Trying to the animated hover effects, but having problems when adding them to the portfolio, maybe because a lot of classes are involved like , for instance. Any clue? Anyway it’s amazing.

  8. This template is awesome!! Thanks so much! I am a Graphic artist using it as a portfolio site in hopes to find a new gig. I’m trying to add a hyper link to a large portfolio slide (magnifier) so that when clicked a new pop up window will appear with an interactive piece I’ve created?
    li class=”box”>

    • I’m still having major problems getting this to work. I would like to click on the thumbnail to open the full size image in the sliding viewer you. I would like the full size image in the viewer to have a hyperlink. Please help… losing my hair. Thanks

  9. Thanks! I haven’t touched CSS for years but this template inspired me to update my portfolio. Great design, and pretty easy to customize. Lovin it :)

  10. Hi there,

    Thanks a lot for this template.
    Can I use it for a website for a paid client?
    So can I use it to make a website for a client that pays me for that?

    Would love to hear from you!

  11. Hi there,
    I´d like to know if is there any extra contents anyware for this template, like otres social icons (as pinterest or linkedIn).
    Thank you very much and congrats about this so complete template.

  12. Thank you so much for the great design! I am trying to customize it for not able to get the contact form to work! I found many have asked this questions, but so far no reply:( Please help!

  13. Wow, your template looks so great! Stunning. I featured it on my site. You may want to read it, but its in german, so… Nevermind! Keep up the good work. I love your freebies!

  14. Hi Team Dzyngiri, Is it ok for me to make this template available as a free available download theme for an open source (GPL) CMS? Of course I will leave credentials in place and will put up a link to here if you would like that.

    • yes, go to style.css and find this
      header {
      /*padding: 30px 0 29px;*/
      z-index: 50;
      background: #eb6a29 /*url(../img/header-bg.png) repeat*/;
      copy and replace #eb6a29 with ur new color

  15. I’m trying to add ‘links’ the slider images, when in a lower resolution than 1299px the links work, but when the resolution is any higher the links don’t work. Any tips?

    Also, is there a license on this template, I’d quite like to upload my ‘adjusted’ version to github, there’s quite a few changes i’m making though first

  16. Hi there,
    This template is awesome!! Thanks so much!
    Can I use it for a my Personal website ?
    Can i do it this way or not ? is it Open Source or Free to Use..
    Would love to hear from you!

  17. Great Template , Thanks a lot for this template.
    Can I host this template as a personal Website Project and is it Free to use?
    Can i do it this way or not, i am not able to find the answer please guide me through this.

  18. Thanks for this template!! its awesome!! but iam trying to send emails (from contact.html) to my own account but it is impossible. i´ve tried everything, i´ve changed and modified forms.js, MailHandler.php but still doing nothing…please give me a hand!! thanks!!

  19. Not sure why no one has helped out with the contact form but to get it to work just add your email to the forms.js in two places:-

    This one towards the top:-


    And this one right at the bottom:-


    Hope this helps.

  20. Thanks for this template, I’ve come across so far the most useful responsive template, great work!

    I would like to active first image (open first slide) to the accordion image slider on home page, which file would I need to edit to do this?

    I tried but did not work as follows . I’ve added ( class=”active” ) but does not work.



    I think it makes a big difference in the design of the home page feature, I know from experience that sometimes this feature is very needed.


  21. Hi Guys,
    really nice template..
    can i use this template for corporate use?
    also if possible can we have license terms ?

  22. I just Love this template.
    Can anybody help me how to get this work as a wordpress theme? I need all my posts in my website coming with thumbnails and should be having a section to leave a comment along with sharing buttons which can only be done with wordpress.

    Or Can I make the blog feature work inside the HTML5? Forgive me if it is a stupid question to ask.

  23. Hey there, I’m looking to upload (ftp) or drag/drop this codester into wordpress and I’m having some trouble with a missing template… I know some basic code, but not enough to really debug. I searched around for an index.php and couldn’t find one either. not sure if that helps.

    Any tips/tricks would be greatly appreciated!

  24. Dzyngiri I think you are great. I was using your template and everything was ok, but the last time I made changes, my brother wasn’t able to see the slider in his pc but in my mac I can see it. I don’t know why. Well thank you for such an amazing template

  25. Hey,

    I want to change the position of the image-blank.png (box)….I want it centre in the screen? Dont know what to change in the *.css….

    …cheers for the template

  26. I really like this template. Thanks! However, I cannot get the search function to work. The search.php loads but there are no results in the page. Any ideas on the problem? Directory structure? Also, what is the bootstrap.js used for besides the top nav bar? I don’t need that nav bar and find that the pages load very slowly just hiding the display. thanks for your help.

  27. Hi,
    I´ve problem with this AMAZING template. In IE 8 there is still visible some kind of “ghost” of bootstrap menu, even if I display:none it in docs.css.
    Can anyone help me please?

Leave a Reply

(*) Required, Your email will not be published