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
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
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!
Sample Usage
Demo and Download This Theme
Demo this theme Demo
Download this theme from the WordPress.org Theme Directory Download
78 responses to “Link Bootstrap WordPress Theme”
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
You must log in to post a comment.