89 thoughts on “The Bootstrap”

1. Just noticed, that posts without title don’t display a link to the title. Also your link ↑ above doesn’t link to the theme itself. Anyway: Nice theme and well coded & structured.

   • Hi Kaiser,

     thank you for your feedback, I’m glad you like it!

     I updated the link to point directly to the Theme in the directory. It was just synced yesterday, so the link was kind of lame before. 🙂

     As to the posts without title issue, could you specify where you encountered that? Posts should always be accessible through a linked post date on all formats. See the unit test at the demo page for reference.

2. Nice! You even implemented post formats. It seems that everyone does post formats a little differently and will probably continue to do so until a standard emerges.

   I really like what Alex King has done with his post format admin UI plugin available on github. Is this something you’re interested in adding to your theme?

   • Hi Brent,

     since this is already available as a plugin (and has nothing to do with presenting content in the frontend), I rather have users decide for themselves whether this is something they like to add to their install. Do you have it running together with The Bootstrap?

     UPDATE: After reading a little deeper in the article you linked, I see that you need explicit support by the Theme to take full leverage of the plugin. As Alex pointed out in the end of the article, data being stored in custom fields are not portable to Themes that don’t support this specific implementation of the plugin, therefore the information would be lost and the user is locked in. Not really something you look for in a Theme hosted in the WordPress Theme Directory, I suppose.

     • Thanks for the reply! You raise an important consideration. I should have mentioned that Alex has a companion plugin to pull this data out for themes that don’t support the custom fields.

       We’re in a catch-22. No one wants to do custom fields because there isn’t a standard, yet there will be no standard until theme authors start copying what others are doing.

       We need a standard for post formats. Otherwise, they’ll never reach their full potential. Twenty Twelve would be an ideal place for it. Thanks for at least taking the time to consider it for The Bootstrap.

3. Hi, do you have any detailed instructions on how to customise this theme once installed? Even the Bootstrap website seems devoid of step-by-step guidelines for beginners, so I’m a bit stuck on where to look next. Thanks in advance.

   • Hi Craig,

     it depends on what you want to do with it. 🙂

     But to be honest, I do not have detailed instructions on how to customize it. As far as WordPress builtin Theme customization goes, you can define a custom background, but there is currently a bug with some paddings, which gives me a hard time.

4. Pingback: wp-coder.net » 20 High Quality & Free WordPress Themes for 2012

5. Pingback: A Free wordpress newsletter » 20 High Quality & Free WordPress Themes for 2012

6. Is it possible to have the theme as fixed width?

   • Hi Jose,

     yes! 🙂

     I’m currently working on theme options and thought about making flex or fix with user selectable.
     In the meantime, if you’re a developer, feeld free to create a child theme and adapt the style to your preferences!

     Thank you for considering The Bootstrap!

7. Hi Konstantin! thxs for this great theme! i love it

   I just have a little problem with version 1.1.4,
   in ur style.min.css file u change this (version 1.1.3)
   #page{background-color:#fff;margin-right:-20px;padding:20px 0;}
   to this
   #page{background-color:#fff;padding:20px 0;} (version 1.1.4)
   when I use the 1.1.4 version, my menu and my sidebar are too close (glued) to the right side of the page.
   I try with the revision 1.2.0 ant iv got the same result can you fix this (little) problem or return the old value –> #page{background-color:#fff;margin-right:-20px;padding:20px 0;}
   Thxs in advance! 😉

   • Thank you Benfarhat! 🙂

     Yeah, applying custom backgrounds gives me a headache because of the way Bootstrap implemented its grid layout. I really have a hard time to make it look good (with margins on both sides of the content) while still maintaining responsiveness.

     For this reason I removed the custom background functionality in the upcoming version 1.2.0, until I find a satisfying solution.
     Maybe with the adoption of theme options, I can make something happen there.

     Thank you for your feedback, it is very much appreciated!

     Konstantin

     • Ouch!!! no no let the custom background functionality works 🙂
       In my project I only add this attributes “margin-right:-20px;” to ur #page css selector inside style.min.css and now everything works fine (margin, responsivness abilities…).

       Thxs for the reply 🙂

8. Nice i like this theme

9. Hi, how do I make smaller side-bar widget area? It’s too wide now.
   Thanks

   • Hi Mara,

     can you specify the problem a bit more? How is the widget are too wide now?

     • Two wide means it’s around 350px, I want it to be 200px.

       • Bootstrap is responsive, so the wider the screen the wider the content area gets.

         Since you probably alreade created a child theme for the category issue, just enqueue a Bootstrap version without the Responsiveness supplement and customize the width of the sidebar.

   • Hi Mara,

     If you you the option of using jQuery, here is a solution:

     jQuery(document).ready(function(){
     	// wider primary
     	jQuery('.span8').addClass('span9');						
     	jQuery('.span8').removeClass('span8');
     	// narrower secondary				
     	jQuery('.span4').addClass('span3');						
     	jQuery('.span4').removeClass('span4');
     });
     

     You may also want to try span 10, span2 (instead of span9, span3) to see which one you like better. Responsiveness still works.

     Saun

     • Whereabouts would this code go?
       The theme is perfect except the sidebar is a little big and this looks like an elegant solution…

10. Hi Konstantin i’m really in love with this smashing theme!!!
    I add some function that my project need (i’m using ur theme)

    -> Adding a top-menu (and a futur footer menu) using the basic ans dropdown pills navigation (nav and nav_pills class)

    In ur “the_bootstrap_setup” function i change this line:
    register_nav_menu( ‘primary’, __( ‘Main Navigation’, ‘the-bootstrap’ ) );
    to :
    register_nav_menus(array(
    ‘primary’ => __(‘Top Menu’, ‘the-bootstrap’),
    ‘top-menu’ => __(‘Header Menu’, ‘the-bootstrap’),
    ‘footer-menu’ => __(‘Footer Menu’, ‘the-bootstrap’)
    )
    );

    and in the file header.php
    ->I insert in line 33 after these line:

    ‘top-menu’,
    ‘menu_class’ => ‘nav nav-pills’,
    ‘depth’ => 1,
    ‘fallback_cb’ => false
    ) );
    ?>

    -> for drop-down abilities In ur the-bootstrap.min.js i add the line (just before closin jQuery(function($));

    $(‘.subnav .sub-menu’).addClass(‘dropdown-menu’);$(‘.subnav li’).has(‘ul’).addClass(‘dropdown’).children(‘a’).addClass(‘dropdown-toggle’).attr(‘data-toggle’, ‘dropdown’).append(‘‘);

    -> I continue with adding another menu to the header menu (in the administration) and it work fine
    maybe it help someone here 🙂
    Sending another comment once i finish custom template page ;p
    NB: I’m using files from revision 1.2.1

    • Wow, I’m stunned!
      Have you thought about forking The Bootstrap on GitHub and make your code available there?

      • Done!! 🙂

11. And another question. How do I show excerpt in cathegory archive instead of full content?

    • You could create a child theme and alter the archive.php file.

      • What is the part of code that I alter? You are not using standard WP code , so I have no idea what to change.

        • Open /partials/content.php, have alook at line 31 where it says:

          and make it:

          That should do the trick.

12. Thanks, I have CSS problem. Can you check my webiste

13. Hi Konstantin 🙂
    I need to add some function to ur theme_option branch
    for example in the navigation bar u add the blogname but mine is too long so i add the abilities to put instead of the name a custom message (or slogan) and now i’m trying to add bootwatch functionality that let u change style to other bootstrap.min.css
    i have a little problem with the style.min.css file,
    can u ta

    • yeeeeeeeeeeeeeeeahhhhhhh!!
      custom bootstrap style Works!!! i send u an email to show u what it does ! hope u love the result 🙂

14. Collapsible Menu is not working on Smartphones nor when the Window is resized. What’s wrong with this?

    • That’s odd. Did you try the demo site, to see if it’s really a problem with the Theme?

15. Hi! This is a wonderful theme.

    How can I reduce the size of the page title? I really don’t need it to say Home on the front page.

    I am using WordPress more as a CMS solution rather than a blog, so I don’t need such large page titles. I did not see an area in CSS to alter this.

    Thanks so much!

    Chris

    • Hi Chris,

      thank you! 🙂

      You could create a Child Theme and just add your desired style, overwriting the default Bootstrap behavior.

      Konstantin

      • I don’t know how to do that, and I’d rather not mess with it. I figured there’d be some simple change to make. No worries, thanks!

        • How about

          • changing “Home” to something more helpful, and fitting for that page, like “Event details”? You can keep the “Home” label in your menu settings.
          • not defining a title for the page at all? As I mentioned above, the navigation label is independent from the page title.
          • asking me to create a simple custom child theme for you? 🙂

16. Pingback: 20 New and Free Minimal Wordpress Themes

17. Pingback: 20 New and Free Minimal WordPress Themes « CSS Tips

18. Pingback: 20 nuevos y Gratis WordPress Temas Minimalistas « Blooglery

19. Pingback: 20 New and Free Minimal WordPress Themes

20. Pingback: 10 پوسته وردپرس سال 2012 | یک عسگری

21. Pingback: Wordpress Leaks » 20 New and Free Minimal WordPress Themes

22. Hi Konstantin,

    this is a great theme!

    I have a question:
    How can I use the icons (by Glyphicons), as mentioned in the Twitter-Bootstrap-Documentation (http://twitter.github.com/bootstrap/base-css.html)? I tried it, but it doesn´t work.

    Thank you for your help!

    • Hi Sonja,

      I’m glad you like it!

      Unfortunately Glyphicons are released under the Creative Commens License, which is not compatible to GPL, and therefore can not be used in any Theme in the WordPress Repository.
      I didn’t come up with a good plan yet, on how endusers could upload them themselves.

      Konstantin

      • Thank you for your reply. Understand the problem. Just one more question: Is the Bootstrap-CSS complete? Is everthing in for loading the buttons, or do we need a more complete Bootstrap package for implement the icons ourselves.

        • The package is missing the icons part, other than that it is complete.

          • Ah okay… thank you! Knowing that, it will be easier to tinker the icons in 😉

23. Pingback: Photoshop VIP ☞ 「シンプル・イズ・ベスト」、ミニマルデザインの無料WordPressテーマ素材20個まとめ

24. Pingback: 20 Fresh n Free WordPress Minimal Themes

25. Hi Konstantin,

    What will it take to add the ability to change the width of primary and secondary to OPTIONS by setting the span (e.g., from span8, span4 to span9, span3)?

    Saun

    • A Child Theme 🙂

      For one I’m not really sure how one would design the option panel for this kind of setting, and in my opinion this is something that could be managed best by creating a Child Theme.

      I’m open for code suggestions on GitHub, though!

      • I am using child theme and jQuery to get around the problem. I was trying to explore a better approach.

        On the topic of child theme, The Bootstrap does not seem to load the style.css of child theme. I got around the problem by adding <link href="” rel=”stylesheet” type=”text/css”> to header.php. Is there a better way to get The Bootstrap to load child theme’s style.css?

        Saun

        • You’re good!
          Added a patch for the version after 1.3.1, which will fix this issue.

          Thank you!

          • Thank you very much for be so responsive.

            Saun

          • Hi Konstanin,
            I just noticed that adding to header.php overrides parent (The Bootstrap ) style.css. However, it does not seem to over ride jQuery UI’s css.

            Any suggestions on how to override jQuery UI’s css?

            Saun

          • You could make the selector more specific, deregister the jQuery UI style or mark the jQuery UI style as a dependency, so your stylesheet gets loaded after it.

26. Thank you for a lovely looking theme… I have a problem … the ‘page’ I have created does not show… where is it, and how do I make it visible on the landing page?
    I have also added to to the side bar, but I want to add another image,
    many thanks, Karen

    • Hi Karen,

      you can add pages to the navigation bar through Appearance > Menus.
      For a detailed description have a look at this Quicktip.

      Konstantin

27. Hi,

    Great theme you’ve got there!

    I have a pressing question, how do you implement the dropdown function?

    I have edited the ‘depth’ in ‘wp_nav_menu( array(‘ to 2. But now, the submenu is not hidden when not hovered, and i can’t get the dropdown to work, could you help?

    Thank you.

    • Hi Ben,

      thank you! 🙂

      There are three nav menu locations in the theme, which one do you mean exactly?

      Currently I add those classes and attributes via JavaScript, but from v1.5.0 forward, I’ll use a custom Class, extending Nav_Menu_Walker, to achieve this.
      Maybe you want to check out the repository at GitHub!

      Konstantin

28. How do I change the font size? It is a little too large and I want to reduce it.

    • Hi Jerry,

      you could create a Child Theme and adjust the font size in its style.css

29. Hi Konstantin,

    I have one more question, please:

    Do you have a changelog for the different versions? I would like to know the changes from version 1.2.6 to 1.4.0

    Thank you for your help & viele Grüße,
    Sonja

    • Hi Sonja,

      yes, with every package of The Bootstrap comes the readme.txt file, where I document all changes. This is the changelog for 1.4.0.

30. Pingback: wp-coder.net » 30 High Quality Free Responsive WordPress Themes 2012

31. Pingback: A Free wordpress newsletter » 30 High Quality Free Responsive WordPress Themes 2012

32. Pingback: The Bootstrap 1.4.0 を日本語化 « pipio.org

33. I love this theme: clean and responsive. But I’m having difficulty with the drop-down function in the menu in the main navigation bar. If I have pages with children, then the children show up as drop-down items in the menu, all good and proper. But I can’t seem to access the parent page from the menu any more. Is there something I’m doing wrong, or is this a limitation of the theme?

    • Hi Rhiannon,

      this is a limitation of Twitter’s Bootstrap unfortunately, and the way it handles dropdowns. This is something that annoys me, too.
      I mentioned it in the readme.txt file, maybe I should add it in this article, too.

      Thanks for your comment!

34. Pingback: The Bootstrap 1.6.0 の日本語化 « pipio.org

35. Pingback: 30 High Quality Free Responsive WordPress Themes 2012 | Неинтересный блогНеинтересный блог

36. Konstantin,

    Excellent theme, I am really enjoying it. However, I cannot seem to figure out how to make the excerpts function work like in your Readability Test example. The functions.php file seems to have everything necessary to create the snippet on the main page, but when I publish the entire post is visible. Any help would be appreciated.

    Thanks!

    • This ressource from WordPress.com might help you. I didn’t use the_excerpt() in the code, but the More-Tag in the editor.

37. Thanks again Konstantin for the awesome work! 🙂 I have discovered a lot more about Bootstrap in the past few days through The-Bootstrap, and wondered if – when 2.1.x series is released – whether it would be quite easy to ‘upgrade’ or know what templates to edit?

    One of the issues I came across was to do with video embeds: when I used the standard WP oEmbed functionality (i.e. just a simple Youtube video or squarebracket[embed]) it caused the ‘phone’ or small-screen version of the site to become confused and behave like the full-screen, as it was being ‘stretched’ using the iframe – am not sure if this is because of the way I have customised the child theme as I have yet to test this issue on a fresh copy of Bootstrap.

    However, I was able to address this by adding the CSS suggested in this thread (https://github.com/twitter/bootstrap/issues/2376) as well as use the oembed HTML filter (http://wordpress.stackexchange.com/a/50781) in functions.php.

    It is not an ‘official’ Bootstrap fix, but I thought it might be useful to share this with others.

    • Hi Flick,

      thank you for your feedback!

      Concerning updates: Since you are using a Child Theme, yes, it’ll be easy. I’ll have changes covered (like the carousel implementation from 2.0.2 to 2.0.3)

      Concerning embeds: Is this a browser issue maybe? Or when resizing? I can’t seem to reproduce the issue. On Responsinator everything seems fine. First one uses embed, second one iframe.

      Thanks,
      Konstantin

38. Pingback: 30 бесплатных WordPress тем с адаптивной разметкой | Wordpresso

39. Pingback: 10 Minimal Wordpress Themes | DezineMix.com

40. Ciao Konstantin,

    Dude, I dig your theme! Been using Skeleton for base theme for a while now, but once I found yours I did a swap as fast as my custom code allowed me to!

    One thing I did miss from Skeleton was some of the shortcodes… so I’ve forked your work (vinorodrigues/the-bootstrap) and added some shortcodes for some of the Bootstrap Scaffolding and Components.

    Hope you like…

    • I do! Good work! 🙂

41. This is a really great project! Just a few questions, please:

    1. Is Bootstrap completely integrated, with all functions and styles, or are there some limitations?
    2. Is it easy to keep the theme up to date, when using a child theme?

    Thank you!

    • Thanks! 🙂

      1. Currently the Glyphicons are not bundled with the Theme due to licensing issues. These issues have now been resolved, so that the upcoming version 1.8.0 features a complete integration of Bootstrap.

      2. Yes, absolutely! Breaking backward compatibility will only occur on x.0.0 version changes, if at all.

      You’re welcome!

      • Very good news. Thank you for the answers and the great theme, Konstantin!

42. Are there any changes to the base bootstrap css or javascript? I’m having trouble with a custom carousel, it will not pause on hover, even I explicitly set that option in the initialization of the carousel.

    • No, it’s a straight copy from the Bootstrap download page.
      Have you checked out my demo site and double-checked there?

      Maybe some additional JavaScript from a Plugin is messing with the carousel?

      • Narrowed it down to a bug in the Carousel javascript, filed a report on github for Bootstrap. Your the-bootstrap.js file initializes carousels, and I was initializing mine again. The Carousel JS is meant to handle it, but it has a bug in it.

        • Thanks for letting me know. And especially for opening an issue with Bootstrap!

43. Hi! Add, please
    height: auto !important;
    for fluide images.

    • This is already implemented. Do you experience problems with it?

      • In last versions of theme only width of images was fluid (width: ) – so images on small resolution monitors was deformated.
        After every update I add that string to css.

        header img,
        .entry-content img,
        .comment-content img,
        .widget img {
        max-width: 100%; /* Fluid images for posts, comments, and widgets */
        height: auto !important; <——
        }

        Thanks for theme!

        • Maybe you want to test it on my demo page? Images are resizing just fine. Are you absolutely positive, that this is not caused by third-party CSS?

44. Amazing theme. I will use it as a base for specialized child themes and customize everything about it! 🙂 Got a github?

45. Sorry, just saw the github. I’ll be contacting you very soon 🙂

    • Looking forward to it! 🙂

46. Hi there

    I just started looking at this theme today and love it. I was wondering have you considered adding support for changing the theme color scheme. I am coming off the back of twentyeleven and I loved that they had a ‘light’ version and a ‘dark’ version. Some websites are white, but some are black!

    I have been investigating this tonight and have picked out a few areas for change, so am incorporating the changes I need for me via child themes, but if you don’t know what I am talking about checkout a website that has that theme installed and have a look at:

    http://www.example.com/wp-admin/themes.php?page=theme_options

    also the support hey have for link color is also nice, or should at least be complimentary for the dark theme.

    Any way only a suggestion, thanks for releasing this work

    • Hi Douglas,

      Thank you for your feedback!

      Feel free to open a GitHub pull request with your changes any time, and I’ll see what I can do!

      Thanks again
      Konstantin

      • I forked your most recent check in at github. I was able to add the options on the themes page and they are saved to the database. However, when I then tried to hook the changes through to the css settings I ran firmly into jQuery land, which I have no experience.

        Initially I just tried to change the link color, the color scheme it not hooked through, not too sure all the places you would have to change to switch over.

        Any way if you are interested my up to date work is here:

        https://github.com/douglaskastle/the-bootstrap

        I would like to think I could make more progress via this technique, but I’ll need to get a lot more jQuery behind me.

        PS you should think of setting up a google group, this comments page is a bit hard to parse, but keep up the good work

        • Oh I had a further look at what you were doing, and for changing Layout you weren’t actually using jQuery, it was been selected via the theme option, the_bootstrap_layout_classes(), I figured it out and am now passing the link color to the header via the same technique. It may not be pretty but it works.

          This is what is checked in now to github.

          I don’t know if this is the best way to override css values, twentyeleven does it via some ‘Embedded Styles’, not saying that is the way to go though.

        • Hey Doug,

          thank you for your invested efforts!

          I was actually considering to add these two options, but didn’t want to deal with the link selector mess and everything. Looking forward to your body class implementation though, I couldn’t find it yet in your repo.

          Funny that you mentioned adding a forum, I was just thinking about it the other day and thought there is just not enough noise yet.
          Maybe I should reconsider…

          Thanks again,
          Konstantin

          • Not too sure what you mean about “body class implementation”, sadly that is a function of me having no php/css experience (python is my space).

            As to forum, I think I saw some where that there are 700+ comments (?) it is definitely time for some type of forum! google, bbpress what ever, but something.

47. I finally have time to test the theme. Is there an easy way to turn the navigation into a pills navigation and place it in one line with the logo?

    • Yes, try using the “Header Menu” location! 🙂

      Thanks,
      Konstantin

      • Oups… that was really easy, thank you! 🙂
        And is it possible to make a switch from the nav-pills to the dropdown list, when the screensize is smaller? Is that a theme thing, or a bootstrap thing?

        Another question: I need a left sidebar für a submenu on the pages of the project, but a right sidebar for the blog area. How would you solve that?

        • This would be a Theme-thing, since more markup is necessary.

          I’d use a widget on the right sidebar. 😉

          The easiest way for you to achieve this is to create a Child Theme and add your changes there.

48. OK I got dark themes working, at least as a proof of concept, it is not the cleanest of code, but it is functional. The dark theme follows the color settings found in the dark theme for twentyeleven theme. I also over loaded the btn-primary to match this dark theme, it is not orange-y in stead of blue-y.

    Due to issues I was having with how I had git configured I had to blow away the repository on github and start again, so if any body had checked out my work yesterday, they will need to do it again.

    https://github.com/douglaskastle/the-bootstrap

    Work still needed, I don’t know if I have overloaded every css case that is white with black (in fact I can guarantee it) and the setting in the “Custom Header” do not reflect what the theme is doing. Also due to additions of options I don’t know if the translation will be comprehensive any more. If any body has any comments on how to improve the code are enhance it please it it on.

    Also, yesterday I said ~700 comments, I don’t know where I got that number, more like 86, still a lot though.

49. Due to the amount of support questions and the decreasing searchability of this thread, I decided to move the discussion to the WordPress forum and close comments on this post.

    Please post you questions there, and I’ll be happy to answer them to the best of my knowledge! 🙂

    Find support →

50. Pingback: WPTouchを使わないスマートフォン用のWordPressのテーマはどうしよう？ | かっぱふぅ雑記帳

51. Pingback: 王十三的博客 – 百宝箱

52. Pingback: 55+ Minimalistic and Simple WordPress Themes - wpBriefly

53. Pingback: Top Twitter Bootstrap Resources | Developer Kitty

54. Pingback: 70+ Clean and Simple WordPress Themes

55. Pingback: I'm Going Responsive « Bradley Davis

56. Pingback: 45+ Great WordPress Bootstrap Themes - Neweb

Comments are closed.