Shield – One Page Theme

Framework Used: Bootstrap 3.1.0

Shield is an one page theme, ideal for agencies and freelancers. Elegant and with a fresh style. Uses the beautiful icomoon fonts.


SHIELD700Try It: Live Demo

Download Now


Carlos is a self-taught designer & developer working as a freelancer since 2006. He loves creating eye-catching sites and cool user experiences. Since 2011 he develops sites using the awesome Twitter Bootstrap framework. More Here:

Leave a Reply



  1. Shawn

    Very Nice. I like the simplicity and cleanliness.

    • Harish

      I am trying to develop comments area with reply option

  2. Kai

    Just want to say thanks, looks so nice!

  3. Erwin

    Wow! This is really nice! Great work man : )

  4. marco


    This looks verey great, one question how can i donwload this theme are there some instructions.
    I hope you can help me i want to use this theme for my social project.

    Regards Marco

      • marco

        Hi Carlos,

        I tryed but i get a error by downloading Shield_zip(5,52 mb) of, when i put submit i get can`t download shield_zip. I don`t know what the problem is maybe there is a otherway to download this great theme
        Regards Marco

      • marco

        Hi Carlos,
        Problem fixed i downloaded throw a other browser(chrome) no problems so the problem is IE9
        Thanks Marco

  5. Oswaldo Ferreira

    Simple and awesome!

  6. Windmark

    Really nice!

    One thing, you have an extra ‘)’ on line 18 in jquery-func.js, the console says “Uncaught SyntaxError: Unexpected token ) “.

  7. Taimur Aziz

    It is an awesome template with a premium quality. Thanks for sharing this for free 🙂

  8. Andrew

    Hi, thanks for the theme!

    Noticed a small thing (I think it is a bug). Let’s say you use the navbar and click ‘About’, then you want to go back and click ‘Home’. ‘About’ stays highlighted, while ‘Home’ never gets highlighted. And sometimes in the middle of this, if I click ‘Portfolio’, the element before gets highlighted (in this case it is ‘Team’).

    • SearchSA

      Hi Andrew

      Could you manage a fix for these – I sit with the exact same problem like you mentioned.

      Kindly await your reply

  9. kim

    Awesome theme, great quality.Where does the icon images located example the shield?

    • Hi Kim,

      the icons are from icomoon. Are located in the file icomoon.css and you also have the current files to add and delete the icons included in this package. If you want to know more about the free icons included, just check this page:

  10. Tony

    Is it possible to use this as a WordPress theme? I looked up some articles online that this it is possible having a bootstrap theme convert to a WP theme, but I wanted to know if you have done this already, because I absolutely love this theme and this is what I want to use for my next website. Help!

    • Hi Tony,

      Yes, you can convert this theme to WP if you want. I don’t have a WP version of this theme and there is no schedule to convert this theme.


  11. john blakley

    hello thanks for all the nice themes, some of the the navigation links don’t highlight when over the perspective section. I’m using chrome on a macbook, thanks again.

  12. Shawn

    The HOME tab in smooth scrolling never shows up with the “active” class. Is there an adjustment for this? On Mac using Chrome. Thanks again.

    • I think is just the position of the section tag inside the html. I will try to examine this and solve it as soon as possible. Thanks for your comment.

      • Shawn

        Updating the headerwrap HTML to this and it fixed it:

        • Leo

          Could you maybe share your solution? How did you fixed highlighting in the fixed menu?

          • Matt Brody

            Here’s a fix that worked for me.
            In the bootstrap.css file, remove lines 4053 and 4054, should look like this.
            color: #fff;
            background-color: #080808;

            This will remove the black background, but still highlights the section you’re in.

  13. lexeek

    Wow! This is certainly really good theme! That is what I need. Thanks!

  14. Nick Byrne

    Great template just wondering as I’m getting a crash course in coding what the line of code wold be to have a linked in icon?

    • Hi Nick,

      The linkedin icon is not included in this set. You can add, delete or modify your icons in the site. Just import the SVG file (included in the icomoon folder in your theme) and do the changes you want. You have a guide in the site. Thanks.

  15. Saneesh

    Awesome work man. Loved all your themes.
    I am downloading “shield” for a professional use, if thats okay with you.


    • Yes of course. Please check the “About Themes” page to understand our themes license. Thanks.

  16. Pingback: Latest Best Free Bootstrap Themes

  17. Brendon R

    This looks incredible. Only one thing I noticed.

    The active section of the menu is off by one. If you click Team, the smoothScroll kicks in but the page denotes that Services is Active. It is this way with all of the sections.

    • wiZZard


      • Kamil

        I have this same problem. Where put this code? When I add it to bootstrap.css it dosen’t work. Can you help me?

  18. Kyle

    What property is making the first header-wrap(the picture with the shoes) color saturation up? It’s making my images that are already pretty color saturated even more so.

    • Hi, There is no property there. My image looks a little darker because I add some filter via Photoshop, but no properties were added to the CSS to modify any image.


      • Kyle

        that’s weird, because I add my own image and it looks highly saturated in comparison to what it normally is.

        • I don’t know what to say. If you want, remove the headerwrap and create a new wrap yourself to check if the image looks in same way. Again, no properties are applied to the image in any case.


          • Kyle

            ok, well thanks for the quick response.

      • Jacob

        Could you please elaborate on what kind of filter you used on the photos? They seem to go a long way toward making the aesthetic of the theme work.


  19. Christopher

    I downloaded the Shield theme for a site a need to get up in a hurry. Looked like a perfect, and beautiful, solution until I tried the demo on my iPhone 4. When I click the menu icon, the menu opens up great, but after clicking any menu item the menu doesn’t disappear again. Any thoughts on how I can fix it?

  20. Michael

    Anyone know how to fix the menu selection problem? It highlights the previous link when you click on a menu item.

  21. Keith

    I want to use your themes for commercial use. Do I put original website framework design by in the code?

    • You can use the themes without a problem. You only should add a proper attribution to our work. Nothing special. Our name is enough. Thanks.

  22. Pingback: 27 Free Bootstrap HTML Templates | Dev Zone

  23. Leo

    Hey guys, has anybody solved an issue with link highlighting wrong menu item in navbar? Also noticed that on mobile the dropdown menu doesn’t close when you select a section.

    • Leo, The highlight problem can be solved just adding more space in the beginning of the section. If you see, clicking on a section will highlight the previous one, but if you scroll the page just a little the correct option becomes highlighted. Play with the spaces before each section and the problem will be solved.

      I will update the theme as soon as possible. Thanks.

      • Aaron

        Has this been fixed yet. I’ve played with spaces etc, but to no avail.

        I know it’ not a huge thing, but it’s annoying LOL

      • Mike

        Can someone explain how to add or adjust the spaces before the sections to remedy the navigation highlighting problem/bug? Thanks!

  24. Rajan Maharjan

    These are awesome resources Carlos. Thanks for sharing it out.

  25. Michael Butler

    Thanks! Small problem found: the headerwrap div has two id attributes, “headerwrap” and “home”.

  26. Pingback: Freebies – 30 Exciting Free Bootstrap Themes with Goodies

  27. Pingback: Black Tie – Free Handsome Bootstrap Themes – Shield – One Page Theme | Design Inspiration

  28. Jonathan

    Great template guys! Thank you. This is going to be used for my new educational site called AircraftAcademy. Anyway, where the shield logo is in the left corner, I would like my logo there. Can you tell me how to do this please? As I am struggling to find the section for the code to change it.


    • Hi,

      The logo is a icon font. In the top bar section, you can find the reference of this icon (fa fa-shield). Change the icon with the desired icon. Thanks.

      • Jonathan


        Sorry I can not find it. I am using Dreamweaver CS6. I can not find the icon called fa fa-shield. Or is this in a CSS document?


          • Jonathan

            Okay, I have changed the location but still nothing. Can I ask do I do this in the index.html? because that is what I have done it from. But still no change.

          • Jonathan

            Just gave it another try. Still nothing. Am I doing this correctly? I am doing this in the index.html. Or do I have to change this in another css file?

          • All changes should be done in the HTML file. You can either, use another icon or use an image. If you want to use an image, you should remove that line and point to your image. Example : img src=””

          • Jonathan

            Okay I used an image but that is very big! But I have an icon I just want to know what bit of code I have to use to get that it.

          • Jonathan

            Sorry about this! Okay I have managed to fit my image to size but the logo is transparent but instead it has a white background. Do you know why?

  29. Elaine

    Hello, we love this theme! We are using it for our website. We have a hard time to adjust the header image (hero image) to work for all screen sizes (iphone, ipad, PC, etc). Is the reason the Shield demo worked is because the image had a lot of smaller objects placed all around the top and bottom edges of the image and that’s why it didn’t matter how it scaled or got cropped? Do we need to follow the same pattern? What image dimension would you recommend? Thank you!!

    • Elaine,

      I am bit confused about your problem. I don’t understand the part of “smaller objects placed all around…”. The top image is just one image, no other objects. Just the image and the text in the middle.

      Images in responsive devices have different behavior depending the code and what you want to achieve. In this case, the main idea of this image is show clearly the text inside and the logo no matter the size of the screen. If what you want is show the whole image no matter the device, you will have another important problem. You can do that, see the complete image, but will be displayed very small, because need to fit on the device screen. So, in a desktop or in a laptop, won’t be a problem, but in a mobile phone, you’ll hardly can see the image and of course, won’t see the text and the logo. So, the idea here is keep the text in the proper portions, so you can read it no matter what device you are using. Regarding the image, we used for this demo a 1500x1000px pic.

      • Elaine

        This is very helpful. Thanks so much for the quick feedback. Great work and look forward to your new awesome templates!

  30. Jacob

    I’m having trouble finding the code that controls the colors of the buttons (green in the ‘We are Hiring’ section and blue in the ‘Portfolio’ section. Is it in main.css?


    • Jacob

      Nevermind, found in bootstrap.css

  31. Luc


    Just want to say excellent theme! I really like it.

    Is there any way to add a LinkedIn icon? It is not included in the icomoon.css file.


  32. Pingback: Free One Page Website Templates | Free Design Blog

  33. Disease

    Great work man! But there is a problem with the navbar, in Google Chrome, after click a page button, the active link of the page is wrong, example when you click on “portfolio” the active link is “team”


  34. Pingback: 45 Best Bootstrap Portfolio Website Templates | Bashooka | Cool Graphic & Web Design Blog

  35. Pingback: 無料で30枚!スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました

  36. Jonathan Gomes

    I would like to know if i can use this template – Shield – One Page Theme – in JOOMLA’s CMS, and the price if i had to pay somehow.

    • Hello Jonathan,

      First of all, this theme is completely free, no need to pay anything. Second, this theme is a HTML+CSS Bootstrap theme only. Is not ready for use with Joomla. To do that, you need someone who can converts this theme.


  37. marcel yao

    I really want to learn to bootstrap my career webmaster and I esper that template will help me me a lot thank you very much

  38. Julia

    Hi, i love this theme and so glad its free, I’m using Tumblr though and was wondering if you could tell me how can i translate these files to suit tumblr? I hope you don’t mind that I will edit it to suit my needs:) but I’m keeping your credit for this awesome work 😀

  39. Pingback: 50 Free Bootstrap 3 Templates and UI Kits

  40. KSchassen

    Just an FYI — there are a couple of minor mark up errors in the file toward the beginning. A ul that needs a closed tag and a div that has two ids.

    Nice job!

  41. Pingback: Free Bootstrap Themes and Templates | Get Facebook Likes and Fans

  42. Matthew Brunetti

    Please share over Github 😀

  43. Wil

    Carlos, this is a great theme but I’ve had a problem with the modal expanding. It doesn’t seem to be a problem with any particular browser – on one pc it works with IE and not Chrome but on another pc the problem is reversed. Any idea what I’m missing?

  44. Nacho

    What about de IE >10 compatibility?

    Any way to solve this problem?

    • Dev

      Hi Carlos,

      Do you have any feedback for Nacho’s comment RE: backwards compatability?

      Awesome template by the way, great work and perfect for someone new to responsive and smooth scroll design.


  45. Veljko

    Hi Carlos,

    first of all, THANKS. Your design skills are off the roof! You are really good at what you do!

    My questions is, Can I connect the blog section to my actual blog? I have a wordpress blog that I use for work and I am wondering if it’s possible to connect that blog to this page? If not, how can I connect the blog section to any blog?

    Thanks again!

    • Hi Veljko,

      You can’t connect your blog with this theme without make some dev changes. The theme is HTML+CSS only. To work with your WordPress blog, the page should be converted to a WP theme.


  46. improoviz

    Beatiful theme, thanks a lot!
    I have a question, how may i change fonts? I find this on index.html, but i didn’t find this in css files.

    • improoviz

      Or, sorry. I found this =)

  47. Veljko

    Carlos, thank you for all your help! I was wondering if there was an alternative for the modal (portfolio). There is no way to access it from a phone.
    Do you have any suggestions?

  48. Gina Kovanda

    Embedding an iframe video is not working. It says “file not found”. Can you help? What am I missing?

  49. Pingback: 13 Free Bootstrap Themes & Templates 2014 • WPZee

  50. Diana


    This is a great template! Thanks for sharing!
    I see that not all glyphicons display when I try to use them. Can I add like a new file for that or something?

    • Diana, don’t know why, all glyphicons are included because they come as a base part of Bootstrap. There are other icons that came with Icomoon stylesheet. If you want to add or change these icons, I strongly recommend that you visit their site: Thanks.

  51. Peter

    Please ignore the previous comment. The comment system strips out the HTML etc. Here’s a new attempt. Hopefully this works.

    Really nice theme, many thanks for sharing Carlos!
    Here’s a quick roundup of bug reports and suggested solutions:

    1) in file assets/js/jquery-func.js on the last line it shows ‘});’ and it should be ‘};’

    2) in file index.html around line 65 it says <div id=”headerwrap” id=”home” name=”home”> which should be <div id=”headerwrap” name=”home”>

    3) in file index.html around line 57 there is a missing </ul> after the line <li> <a href=”#contact” class=”smoothScroll”> Contact</a></li>

    4) clicking on the little logo on the left in the navbar does not make it scroll back to the top

    5) highlighting the wrong menu item in the navbar. According to Carlos it can be fixed by doing something with spacing but a CSS noob like me has no idea what that means. Also the CSS snippet suggested by wiZZard did not work for me. Anyone have an example how to fix this?

    Carlos: could you perhaps update the theme with these fixes including a fix for the menu highlighting issue? That would be most appreciated.

  52. Pingback: Shield – One Page Theme | File-Shack

  53. Joseph G.

    I got to say this.. I really love your themes.
    But, when I try to install them on my WordPress website, there is always a problem.
    I think it’s because you give the Theme files in a folder (inside the downloadable .zip file) and not in another .zip file, so that someone can upload it.
    Am I doing anything wrong?
    Please, let me know.

    • Hi Joseph,

      Please, read carefully the description of each theme. This theme is not a WP theme. You can check our WordPress themes in the right sidebar. there you can find which theme was converted and you will have the proper link to the page to download the theme.

      Our themes are HTML+CSS only. Not released for any particular CMS. Our team and other users converted some themes, but is not our primal purpose.


  54. angel

    I like very much this template! Just a little bug when you use it with touchscreen tablet like ipad: you can press on the buttons in the navbar just one time and then all the buttons became unclickable. To be able to click again you have to scroll down or up the page and then you can click on a button in the navbar. How can I fix this bug?

  55. Pingback: 35 Free Bootstrap HTML5 Website Templates - Webdesigncone

  56. Pingback: 25 Best Free Bootstrap Templates 2014 - Webdesigncube

  57. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 我爱互联网

  58. Rafał

    This is really nice! Great work 🙂

  59. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 陈学虎

  60. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 服务器维护

  61. CSS ABC

    Highlighting the wrong menu item in the navbar. According to Carlos it can be fixed by doing something with spacing but a CSS noob like me has no idea what that means. Also the CSS snippet suggested by wiZZard did not work for me. Anyone have an example how to fix this?

    Please fix this issue. Otherwise, this template loses its best feature and it is kind of useless.

    • Vivek

      Please ignore my previous comment… 🙂

      To solve menu highlighting issue you need to add href like below.
      href=”” class=”smoothScroll”>Home

      Vivek Kale

  62. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 |

  63. Pingback: 30+ Best Free Bootstrap HTML5 Website Templates -

  64. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 大分享网

  65. mostaffa

    yea its good but it to mutch slow

  66. Kamil

    “This looks incredible. Only one thing I noticed.

    The active section of the menu is off by one. If you click Team, the smoothScroll kicks in but the page denotes that Services is Active. It is this way with all of the sections.”

    I have this same problem, anybody can help me?

    • Jason

      In the HTML code, right above where it says “navbar-main” is a piece of code with “data-offset=”0″” in it. Change that 0 to 1 and that should fix your problem.

  67. Pingback: 30 Increíbles plantillas web de Bootstrap gratis -

  68. Pingback: 25+ Free Bootstrap HTML Templates - Bootstrap-Tricks

  69. Pingback: 15 Latest Bootstrap Themes Free Download | DesignMaz

  70. Ethan

    I am working on a website for a real estate agent my family has known for a while, I love your design here, would you be okay with me starting out with this as a base template and modifying it to suit my needs?

  71. simon

    Hello! I CAN , only a little English.
    How can I set the portfolio that each image is the same image is displayed ?

  72. Clinton

    I love this theme! I was wondering on the “News Letter” sign up. How does this post? PHP or JS? is there a file that I need to edit or do I just create it? Can I convert this into a contact form instead? I’d like to have a message box instead.

  73. Pingback: 50 Free Bootstrap HTML5 Website Templates - Dzinepix

  74. Pingback: 50 Best Free Bootstrap HTML5 Website Templates 2015 - Dzinepix

  75. Pingback: 40+ Best Free Bootstrap Website Templates 2015

  76. Pingback: 40+ Best Free Bootstrap Website Templates 2015 | Ceiba3D Studio

  77. Pingback: Daily Freebie: Shield Bootstrap 3 Theme - Crazyleaf Design Blog

  78. David

    The template looks really great, but could you explain how to solve the problem of the navbar highlighting two headings until you scroll down?

    • Jason

      I found it you just removed the “id” for each section in HTML, that fixes the issue, but removes some very insignificant features which you may or may not be alright with.

      Ex: id=home or id=aboutus

      Just remove these

  79. snowy

    A professional and beautiful design! Perfectly simply and timeless! Thank you!

  80. Pingback: 27 Free Bootstrap HTML TemplatesMobile Games & Design | Mobile Games & Design

  81. Pingback: レスポンシブWebデザインに対応!クリエイティブな無料HTMLテンプレート素材まとめ

  82. Pingback: 50 Best Free Bootstrap HTML5 Website Templates 2015

  83. Pingback: 45+ Amazing Free Bootstrap HTML5 Website Templates - web resources

  84. Chris

    I love this theme!

    On line #65 of the index.html page, you have two ids:

    I believe this may be the cause of the problem when you click “Home” and the “About Us” nav button stays highlighted. It isn’t recognizing the id=”home”.

    The id=”headerwrap” is necessary for the CSS, but without the id=”home”, you get then nav issue. So what I did is change all the “#headerwrap” in the main.css to “#home” (including the media query stuff at the bottom) and it works great now. When you refresh the page, the “HOME” button is highlighted…. unlike before when you refreshed, no buttons were highlighted until you started clicking buttons.

    • Chris

      Oops! Forgot to add:

      Line #65 looks like this:

      should look like this after you change the CSS as noted above…

      • Chris

        I guess it won’t let you post the code for some reason. Anyway…

        div id=”home” name=”home”

        Don’t forget the opening “ltbracket” and closing “gtbracket”.

  85. Paras

    Thank you for the awesome theme. I have converted this theme in a Phalcon MVC Framework but I cant get the smoothscroll.js working. If the file is declared there is no action performed when we click on the nav menu but if we dont declare the file it jumps to the relevant section divider. Can you help?

  86. Kate deBethune

    Hi Carlos,

    This is a fabulous theme. I have used it to skin several Laravel projects I did recently.

    One quick question: do you have a javascript solution for the fact that there is no equivalent for hover or mouseover on the portfolio images for mobile? The modals don’t work on mobile – they just stack up as a set of images with no interactivity.

    Many, many thanks,

    • Martin

      I have nearly finished my project with your theme and now I found out, that the modal boxes are not opening in the mobile version. A bit frustrating right now because I planed it as a main feature for the website.

      Can you tell me if there will be any solution for this? All other is good work,


  87. Bill

    Love your design but am a bit of a nubie when it comes to forms. How do I get the newsletter form to work as a contact form? I’m not seeing where you tell it go via email.


  88. Pingback: 50 Free Bootstrap 3 Templates and UI Kits | News Video

  89. Kausik

    Hi, thank you very much for your theme! It’s simple but elegant. I am using it for my club’s website. I understand and respect that we have to credit it to but I was wondering if it is all right if I change the footwrap to h5 or h6? I am adding my Club’s information there and I’d like that to be slightly bigger. I hope I do not come across as ungrateful. I am really appreciative of your work. Thank you.

    • You’re welcome to do that! Just make sure to tell all of your friends about us and send them our way. We’re very glad you like our themes! 🙂

    • Lena

      Hi, I’d like to thank Carlos as well for a great theme! I’m also wondering if I can change the copyright in the footer a little since I’d like to use it for my portfolio site and maybe add the credit to the section above that I’m making into a “about this site”- section, that’ll include fonts, etc.?

      Thank you!

      • Hello! Yes, you’re welcome to change the copyright in the footer. We would love a little shout out to for the theme! 🙂

  90. Anumah Abdulraheem

    Nice work bro. When will I grow up to be like you? Lol

  91. Bruno Oliveira de Alcântara

    Very nice theme!

  92. Michael

    Hi Carlos,

    Do you know what versions of IE this is compatible with? I’m having some trouble in IE and trying to debug.


  93. Ben Chapman

    Hello Sir! I think this template is absolutely amazing. Quick question, is there any way to make the portfolio boxes touch friendly for mobile devices? Currently, when viewed on an ipad or phone, there is no way to trigger the mouseover necessary to see the “see more” button and push it.

    • Hello! Thanks for the inquiry. We are currently in the process of modernizing some of the older themes to support these sort of interactions. In the mean time, you could change all of those hover effects to click effects, and eliminate the need for hovering. Sorry I’m not more helpful! -Anna

  94. Jamie Fleck

    When the page is minimized and you click on a item from the menu the menu isn’t closing? Is there a way I can fix this?

  95. Mario

    Hi Carlos,

    Excellent theme! Thanks for this.

    A quick question, how do you convert the hero image area into a carousel, is this something that can be easily adapted. Also can the contact area (CRAFTED IN NEW YORK . . . ) background image be also converted into a carousel?

    Thanks and appreciate the help.


    • Hello :)

      Try converting those divs to bootstrap carousels. That should do the trick.

  96. Pingback: 80+ Best Responsive Bootstrap HTML5 Website Templates 2016 - UIdeck

  97. Steffen Schmitt

    Beautifully made, lean and elegant. I really love this one!

  98. Yan

    Thank you. You’re a genius in design. You need create a movie, cartoon or sculpture that all people see it.

  99. Pingback: 14 Template Bootstrap Gratis untuk Membuat Website Keren – Jurnal Web

  100. Lucas

    The class active that gives the backgroung-color to ‘li’ tags on the navbar still broke,
    the retina is not ready to use and left a few files…

  101. Connor

    I’ve tried uploading to but it says that the install failed:

    The package could not be installed.
    The theme is missing the style.css stylesheet.
    Theme install failed.

    Any advice?

    • Hello :)


      Thanks for downloading! So what I think the issue is coming up because the Shield Theme file within the file is what you should upload instead of the entire folder. So compress the Shield Theme file and try to install that. Let us know how it goes!


  102. Pingback: Free Bootstrap Templates 2016

  103. Pingback: Las mejores plantillas gratuito Bootstrap 2014