Link Bootstrap WordPress Theme
Modern, responsive, “flat” style theme
Full Width Images and Sections
Set full-width “featured images” and use the included color palette to create stunning colored horizontal sections for your content.
Off Canvas Menu and Custom Header
A nav button that toggles the menu and you can upload a custom header.
Link is an adaptation of the “Link” theme by Blacktie.co for WordPress. It is a modern, fully responsive, “flat” style theme with a nice color palette, big full-width images, and full-width colored sections. The navigation is a toggle menu fixed to the top of the page. When clicked, the menu flies in from the right. It also lets you add your social media links.
The Link theme is a child theme for Flat Bootstrap. It automatically adapts for desktops, tablets, and phones. It is based on the standard WordPress starter theme (_S) and the Twitter Bootstrap CSS framework. The theme was inspired by the HTML/CSS themes from Blacktie.co and color schemes from Designmodo.com’s flat UI.
Features include a fixed toggle menu, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more.
This theme is designed to have a “static” home page and so when previewing the theme and when you first install it, a sample page is displayed. The theme is perfect for showcasing products or photos with a midnight blue page header.
Theme Features
- Fully responsive theme that changes layouts for desktop, tablets, and phones
- Navbar fixed to the top of the page for easy navigation
- Modern, “flat” style theme with beautiful color palette
- Big full-width featured images on any page
- Full-width colored sections
- Hundreds of icons from Bootstrap and Font Awesome
- Variable column footer with 1 to 4 columns
Page Templates
- Full-width page with colored page header
- Full-width page without page header
- Full-width page with three (3) most recent posts (in columns on desktop)
- Page with right sidebar (default)
- Page with left sidebar
- Page without sidebar
- Site Index with search, pages, categories, tags, and recent posts listings
We’ve even included the ability to have individual posts be full-width as well.
“Shortcodes”
Our “shortcodes” aren’t really shortcodes… you simply use the standard Bootstrap markup, such as < div class=”whatever”>. If you really like shortcodes instead, you can download either of these plugins. They both work just fine with this theme.
- Colored buttons
- Colored message boxes (alerts)
- Tabbed content areas
- Collapsible content areas
- Sliders (carousels)
- Everything else that the Bootstrap CSS framework has to offer!
WordPress Features Supported
custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, fluid-layout, full-width-template, left sidebar, light, one-column, responsive-layout, right sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Sample Usage
78 responses to “Link Bootstrap WordPress Theme”
Comments
This is an amazing theme! I have only one issue with it so far: i’m using this theme on my github webpage and the lato and raleway fonts are not being displayed. Can you help me?
I’ve not yet built out a “pretty” (HTML) page for my github. Those fonts load directly from Google’s servers, though. Can you check what kind of error message you are getting in the browser? Take a look at the functions.php file in the parent Flat Bootstrap theme.
My header image is overriding my featured image on posts and pages. Any suggestions?
Good day
Just installed your theme and it looks great, however i just have one question.How can i remove or disable the bottom page sidebar .i want to remove the following , social sites links,map,address,call to action and the awesome clients section.
I just want to remain with the header and have that for all my pages.?
Your help will be greatly appreciated.
Those are all just samples included with the theme. As soon as you add any widget to the Page Bottom widget area, they will disappear. You can even just add a text widget with nothing but a blank space in it.
Hi, thank you for this theme. It is cool avec clean but I have a problem.
I don’t find how can I change my home page. I will add a preview of my post for example but I don’t find the right folder. I create a new page .php who’s name “Home” with the “page-fullwidht” propriety but when I add a test text it’s doesn’t work. So I don’t understand how it’s work. How can I change my home page ? How does it work ?
Sorry for my english ! I don’t speak very well.
Thanks you for answer me,
Elodie?
If I understand correctly what you are trying to do, you shouldn’t have to mess with any .php files. The ability to set a page as your home page instead of your blog is built into WordPress. See here. Then if you set the page to “page-fullwidth” (or “page-nosidebar”), our theme will alter the layout of that “static” home page.
Ok, thanks you for your reply ! I understand now how does it work. And yes, you understand me correctly.
Have a good day.
I have a similar question, so I am curious to see what the response may be.
I got as far as using .container-fluid (=full-width content div) instead of .container (.container in Bootstrap has a set width of 1170px on desktop).
I removed the width and height from the image, and added Bootstrap’s img-responsive class. But then what? Styling the image with width 100% and a set height of for example 330px will of course distort the image. The only way I could achieve the full width image, was by adding it as a background image using cover
.large-image {
background-image: url(“/wp-content/uploads/filename.jpg”);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
height: 330px;
width: 100%;
}
Wondering if there is a better way to do this?
I’m unclear as to where the images are that you are trying to change. In general, the theme treats images wider than the maximum content area (1170px) as background images. They are padded and cropped as the focus is on sizing to fit the text that is overlaid on them. Images less than 1170px wide are “responsive”, meaning they automatically resize keeping the proper aspect ratio and filling whatever container (div, etc.) they are in.
Hey there,
How do I make an image within a column full width? All of the global settings are full width but I just can’t figure out how to make the image full width. Here is an example from the site.
http://www.musicecademy.com/contact-us
Thanks,
Jaroslav
Hi,
Can you describe how I many be able to add a navbar or top sticky menu to my installed Link theme? Can flat bootstrap give me the choice to use different stlye menus?
Cheers,
Sam
If you’d like a sticky top-nav menu, it would be easiest to use my Pratt or Spot themes. They both have that feature already. Modifying Link would be a lot harder.
I’m having an issue removing the blank background colour from between the last of my content and my page-bottom widget…where would I go to remove the
Thanks
Is it the “Edit” link for admins that is causing it? If so, no one but you (and other admins on your site) will see it. Try logging out and it should look fine. If that’s not the issue, its usually because there is an extra <p></p> or <br /> at the end of your page content. Inspect the HTML for that page in your Browser to look for that.
It is at the end of my page content where the sample widgets would be
It comes up with iframe as a reference. I don’t have that on my site anywhere
My themes don’t use any iframes either. It must be a plugin that is trying to add content to the bottom of the main content area and isn’t working properly.
Hi!
I have some troubles with de sidebar (right), I put some widget but I can’t see it in my web then.
(My english is not good, sorry for that)
Try adding a simple text widget with just one word in it and see if that shows up. Also, check to make sure you aren’t using a page template that hides the sidebar or is full-width. Can you post a URL to your site so I can see what’s not working?
Sorry, I am really demanding, I now.
I would like to use the plugin Easy Custom Auto Excerpt again on my archive page, because then my post photo is shown, I can hide the date, can use a `Read More´-button with custom German text etc.
Now it is ignored by Link theme.
Is this in any way possible to integrate that?
Thanks again, Tim! 🙂
Ulf
Dear Tim,
I love this theme so much.
Is it possible to easily install that each page has different header photos?
Thanks for your support and this theme!!
Best wishes
Ulf
Hi again,
I solved the issue of repositioning my buttons. It was just a matter of where in my .css file I added the formatting which have to be placed right under /* Square off our buttons */.
Best,
Petra
Hi, I’ve now spent another day trying to figure out how to change the position of the buttons but nothing seams to work. Would really appreciate if you can help me figure out what I’m doing wrong or missing. Here’s my site http://www.upbeater.com/. As you can see, the buttons ends up in the upper left corner and also pushing the background image down,
This is what I’ve done:
1. I added 2x Transparent Button to my header.php file. Have tried both in the and in the section and also tried to add a div: Transparent Button
2. In my style.css file I added in the bottom:
#header_buttons {
position: absolute;
margin-top: 5%;
margin-left:75%;
z-index: 1;
}
And also tried different positioning as well as trying to replace the # with a dot and changing the name to ie. “btn btn-transparent” and “page-container-fullwidth ” but nothing will reposition the buttons or place them in front of the image.
Would be super greatful if you can help me with this as soon as you can.
Big thanks!
Petra
Hi Tim,
I love the Link theme and have just started to use it. I have two questions that I can’t seem to solve.
1. I’m trying to add a custom logo instead of the title and have tried adding both: .site-title a { background: url(‘http://www.upbeater.com/wp-content/uploads/2015/03/Upbeater-Logo1.png’) left top no-repeat; display: block; text-indent: -9999px; width: 100px; height: 100px; } and to both the custom CSS and the header.php but I can’t get it to work. Can you please explain again how and where to add my logo over the picture to replace the text?
2. I’m trying to add two of your transparent buttons just under the slogan (between slogan and arrow) but it ends up on the top of the page pushing my background image down. How can I add the buttons over the picture under the text?
Thanks!
Petra
Hello Tim,
I like the LINK theme very much! Thank you for making such a fine work!
There are a few things to report/ask:
1. On one of my websites [ http://rueckfuehrungstherapie-frankfurt-web.de/ ] the sidebar does not disappear in the smartphone display mode, so that the header is not centered. Can you help with that, please? (I use this theme on two other sites and this does not happen there.)
2. Is it normal that when the page builds up, before the appearing of the header image, a green header background is appearing first!?
3. It would be nice if one has more options to decide where the widgets (for example in the page bottom) can be placed.
4. The menu in the sidebar is bottom up in terms of the page order.
5. When you use pictures in the widgets, it would be fine if you could choose from the already uploaded media. Otherwise you always have to exit the theme adaptation, go into media, copy the link, go back in the theme and paste……
Sorry to bombard you with all this. I can live and sleep very well with all this, I would not want to change the theme! 🙂
But it would be fine if you could solve the first issue for me, for the sake of responsiveness. Thanks in advance for any hint!
All the best to you
Ulf
Dear Tim, I have more information about the error in 1. of my message above.
I think am responsible for the error myself. I activated the LINK theme after bootstrap was activated and, as I remember, AFTER choosing my header picture. So then the theme / header was getting confused, I think 😉 .
And it is not the sidebar which does not disappear, but obviously the header menu. I tried some ideas on my own, but I am a complete lay. So there was not much left than deactivating the menu or the LINK theme and activating it again but that was no solution. I think one has to rehabilitate the right theme code regarding the header / header menu and the thing is running. It is much work for me to set up the complete website newly (even when it is not a big one), so I would be very very grateful for any help to wipe out the mistake. It looks pitiful bad on a non-desktop monitor.
Sorry to bother you with that. If there was a chance to donate for your efforts I would be glad to do so.
Best wishes
Ulf
hi,
nice looking theme. you promote it as responsive, however when I open on a screen smaller than computer, the header image is still wider than the screen. Is there something I need to do to engage responsive styles?
UPDATE: so it is the long h1 site title that is breaking the small screen layout. Can an overflow:hidden; be added to that element in the next update?
I don’t believe overflow hidden will work. There is CSS that will truncate text to a single line, but in general people will want it to word wrap. If the issue is with a wide feature image added to a page, you can just wrap your text in
<small></small>to shrink the font a bit so it fits.All my themes are fully responsive, but what can happen is that if the text being overlaid on the header image or page-specific featured image is a really long word where normal CSS word-wrapping doesn’t work, it may extend beyond the size of a smartphone screen. If you break apart the text overlay into words, it will be responsive. If for some reason you need a really long word to fit on a single line, you can add a line of css code to reduce the font-size. There are posts here that tell you how to do that, but if you need help let me know and I’ll add more info here.
Hello Tim,
I’m a beginner that just started to use your theme (link), it’s awesome, a lot of potential, at the moment I’m having a hard time trying to customise it so my ideas can fit to it, but I think I’ll eventually get it done.
Just a couple begginer questions:
1. In the front page I just want the header image and the three social media buttons that come with the original demo. I’ve taken out all the widgets that come with the demo but there’s a “Leave a Reply” box that I still can’t delete . It get’s between the image and the buttons so I really wish I could get rid of it.
2. I’ve been reading all of your answers here and I figured out how to put the social media buttons of the original demo on the one I’m working on, but I wanna edit them, I wish I could use other color (on the whole website honestly) and I need to change the icons, cause I want to add Linkedin instead of Google plus.
If you could tell me how to do this it’ll be awesome. And sorry for my english, I’m from the caribbean and I’m not very very fluent.
THANK YOU
I wish I could link them to my social profiles too. Thank you so much.
Change the <a href=”#”> to link to your social profile, like <a href=”http://twitter.com/timnicholson”>
The “leave a reply” is the standard WordPress comment box. Go into your home page and uncheck the box “allow comments”.
For the social footer, here is the code that you can place in a text widget and then edit it from there. To change the colors, refer to theme’s color palette.
I’m having a hard time putting a link the social logo.. can you help me?
Do you have a code that look really the same to the sample one? gray style… I don’t like the style of the social logo code above that you give… And even If I like it I don’t know how to put a link..
I want to have the kind of logo on the sample… simple logo.. not like the given code above.. the logo box by a green color.. and a word say Follow.. 🙂 can you give me the code of the sample?
I want to have the kind of logo on the sample… a simple logo.. not like the given code above.. the logo box by a green color.. and a word say Follow.. 🙂 can you give me the code of the sample, I like your theme so much.. And I want to use it even though I can’t remove the Copyright Theme by… Hehehe.. Thank you for the theme…
If you just want one simple logo with the words follow us, then just use this part of the above code:
Okay, so I’ll preface this comment with the fact that I’m not a designer–just a teacher trying to set up a course website. I love your theme, but is there a way to change the default lightgreen color scheme (for fonts, headers, etc.) across the site? I’ve read through the documentation and haven’t been able to find a place to do so (though I’m GREAT at adding colored boxes now, so there’s that.)
Any guidance you might have will be greatly appreciated!
You can change the link colors by adding CSS like this:
a { color: #16a085; } a:hover, a:focus { color: #19B798; }Note that links in the footer, copyright section, or any colored sections you’ve added to a page will still use their original link colors. This is so the links look good and don’t have conflicting color combinations.
I’ll add this to the online documentation here and have already added it to the readme.txt for the next version of Flat Bootstrap.
I really like this theme and have been using it for about a month. I did the update through my admin area and now my banner is gone. Can you check out the site and tell me what I need to do to get it back?
http://www.maxxjams.com
Thanks
I’m guessing that you need to update the parent theme, Flat Bootstrap. The parent theme now handles the large banner images on pages. BTW, I like your site! Hopefully this will fix your issue.
Yep that was it. Somehow I missed the update link on the Flat Bootstrap theme but it was there when I looked after reading your reply. Thanks for liking the site. Still working on it.
I was looking into doing a side bar on the right for my facebook and twitter feeds but I only see options for a left side bar. Do I have to change the css to make that happen or is that an addon/plugin/widget?
Thanks again.
The default page template has the sidebar on the right, so you are in luck. The left sidebar template is there in case you want to move it.
Hello, Thank you so much for these beautiful themes. I am not a developer, but I really like the Flat Bootstrap Developer theme and want to use it. How can I modify the call to action section at the bottom of the theme? If I need to hire a developer, is there some id/pw they will need to know?
There’s some information here on how to do it, but basically whenever you add your own text widget it overrides the sample widget(s). http://xtremelysocial.com/wordpress/userguide/
Hello! Thanks for awesome theme! But i have one problem! In “index” page in posts preview i have no html code. http://weloop.ru/ In news no html, but if read full news http://weloop.ru/now-i-eshhe-odna-novinka-ot-weloop/ there it is! (Sorry for my English, hope you understand me)
Sorry, I don’t understand. The only thing I noticed that looked like it had bugs was the forum page doesn’t display a title. Can you explain more about what the issues are? Great-looking site, by the way!
Great theme. Like Cody I am trying to place logo in header.php
Does the img tag need to go in here somewhere/
//.get_bloginfo( ‘name’ )
.( function_exists(‘xsbf_spot_replace_oh_with_dot’) ? xsbf_spot_replace_oh_with_dot( get_bloginfo(‘name’) ) : get_bloginfo(‘name’) )
.’‘;
Yep, replace everything you have listed there with .'<img src=”wherever.com/image.jpg”>’. You’ll probably want to hard-code a width and height as well.
Hi, I’ve been trying to add a “sticky” footer bar to my site, but it seems that for every method I try I can’t get the bar to be “fixed” or “sticky”. Is there a way to do this with this theme?
Assuming you want the footer nav and site credits to be sticky (as opposed to the multi-column footer widget area), you can edit footer.php. Where you see div class=”after-footer”, change it to div class=”after-footer navbar-fixed-bottom”. You’ll need to add CSS as well to put bottom padding on the page to make room for the fixed nav. Do that like this: body { padding-bottom: 73px; }
Thanks for the reply. What would be the easiest way if I want a sticky footer for an email-opt in, rather than the footer nav and credits?
Well, for a sticky email opt in, I would look for a plugin to do that.
Hi, I’ve used link on one of my personal sites, and all is good, great theme. I’ve activated it on another of my personal sites, and no fa bar ‘icon’ (i.e. the stack of plates icon) is showing, just a square, either empty or showing fa, c9 (in a ‘cube’), depending on the browser. The only difference maybe a wordpress version increment, or a flat-bootstrap version (i can get back with those). Any ideas as to the problem? Many thanks for the theme!
NO ACTION NEEDED. Sorry, it was just an issue with the URL of the site, now resolved, thanks.
You can use the standard WordPress Import feature and load the /samples/samples.xml file. You can use this sample to build your home page (or any other page on your site).
Hi , this is really an incredible theme, thanks a lot for it.
I got i question , i wanted to install the sample data but i cant do it?
could yo give more specification about it?
Best Regards
Hello,
Can’t complete the installation. WordPress’ theme manager says: “The parent theme is missing. Please install the “flat-bootstrap” parent theme.”
What do I need to do to install this theme? Thanks in advance.
There should be an option to install the parent theme, flat bootstrap, from there. Worst case, search for the flat bootstrap theme and install that as normal from the WordPress theme directory.
Hello, thanks for the quick answer.
There’s no option available from Wp, in fact it just installs leaving it marked as failed.
I searched flat bootstrap theme from the Wp theme’s installation manager, but it shows about 50 different. ???
Is there a link that I can follow exactly to the flat bootstrap theme that’s needed? If not, perhaps a more accurate name to narrow down the search?
Thank you very much. Best regards.
The parent theme can be downloaded here: http://wordpress.org/themes/flat-bootstrap
Hello Tim,
I’m starting to use your theme (link), and I’m very happy with.
Just one (beginner) question:
How can I remove the comment area?
Thanks in advance!
I found the solution by my self…
I was wondering why i do not have a theme options tab. I have made changes to the php via dreamweaver, but can’t get any further with my changes.
There are theme options under Appearance -> Customize. You can change thinks like site title and tagline, background color, header image, background image, etc. I don’t understand what that has to do with you modifying the PHP directly, though.
I love this theme and its flexibility. However, could you help me add my custom logo where the header title is? Thank you!
To add a custom logo, its probably easiest to edit the header.php file. Look for the navbar-brand section and replace the site name with an img tag. You could probably do this with CSS instead, but it would be harder to do.
Absolutely awesome theme. But I cannot for the life of me figure out how to make my new posts go anywhere but the home page. Ideally I’d like them to post to the home page and another page of my choosing. Is that possible? Is there a plugin I need? Thanks!
In WordPress, when you set the home page to be “static”, it makes you also select a second page to be used as your normal blog page. So I would create one page called “home” and another called “blog” or “news”. Point WordPress to those two pages.
i had try to make sample usage but still can’t make like in sample usage .
i had follow your reply comment 🙁
How can I change the social links and address info on the bottom of the page in the green boxes?
Thank you and I love the theme.
You’ll have to copy the HTML from the sample, put it into a text widget and you can modify the icons and links.
How do you copy the HTML from the sample? The sample on this page is just an image.
You can use the built-in WordPress “Import” function to create the sample page. Just import the /samples/samples.xml file. That will build the page content for you. Also, before you add any of your own widgets to the theme, sample widgets will display. In your browser, choose “View Source” and copy and paste the actual HTML to put into your own text widget(s).
Hi. I am trying desperately to figure out how you’ve created that grid in your “Sample Usage”… Do you have any links that would help me out? I’d specifically like to craft an area like that with tweets from different timelines, video stills linking to YouTube videos, etc.
Hi, you can use the Gallery feature in the WordPress Jetpack plugin to create that grid of photos.