Deliver a tailored solution for your challenges on a flexible, integrated digital experience platform. Support your customers, partners, and employees with a single flexible digital experience platform that works to bring value to your business and end users.

One Platform. Commerce Leaders. I need to replace manual purchasing with digital commerce to improve margins and meet customer expectations. CX Leaders. I need to help customers resolve their issues without assistance from a live rep to reduce the cost of customer service.

I need to engage my employees by making it easy to find resources and quickly get work done. IT Leaders. I need to unite siloed and legacy systems to create a better experience for my users to quickly get things done.

Endless Solutions. Unify content and commerce. Know your audience. Build websites, portals, and experiences. Deploy and manage with ease. Nobody's been able to throw anything at us that we couldn't handle. Our portal supports growing, changing business needs, but it does it in a way that we don't need to re-engineer it every time. It's pretty awesome. Anne Anderson. See how Liferay can help solve your unique challenges Request a Live Demo.TL;DR: Liferay 6.

Because Bootstrap 2 uses different class names you can take BS3 grid and use in the Liferay 6. We have been using Bootstrap 3 here in Valamis pretty extensively in our client cases for a few years now. Our developers have learned the grid system and mobile first approach the version 3 offers.

For several projects, Valamis developers have been responsible for the front end implementation of the design to the Liferay 6. Graphic design comes either from our own UX team or from customers ad agency. In one of our internal project kick-off meetings, we analyzed the layout of the design we had received from the client.

In this particular case, we observed that the photoshop layouts were done with 12 column grid. This kind of layout is pretty much de facto nowadays and we came to a conclusion that the implementation would be straightforward. The Liferay version would be the latest 6.

I guess it is no news by now that Liferay 6. This has been a little challenging for us.

How to Use the Grid from Bootstrap 3 in Liferay 6.2

At the beginning of the implementation, one of our developers came over to me and was slightly upset about the grid system. He had been using BS3 before and going back to old grid seemed somewhat odd. Especially in this project when we were supposed to use the latest Liferay version. We decided to wipe our tears and see if we could find some kind of a workaround to the situation. We started comparing the two grid systems and realized that the old BS2 grid uses different names for the classes than the new BS3.

Boostrap 2. The classes the old grid uses are:. BS3 grid classes are:. There is also media query parts for all the breakpoints. This appeared to be an easier fix than we had anticipated.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. If nothing happens, download GitHub Desktop and try again.

If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default. Some bootstrap-sass mixins may conflict with the Compass ones. If this happens, change the import order so that Compass mixins are loaded later. Using bootstrap-sass as a Bower package is still being tested.

It is compatible with node-sass 0. You can install it with:. If you use mincer with node-sass, import bootstrap into a. See also this example manifest. Import Bootstrap into a Sass file for example, application. The full list of bootstrap variables can be found here. You can override these by simply redefining the variable before the import directive, e. You can also import components explicitly.

To start with a full list of modules copy this file from the gem:. We have a helper that includes all Bootstrap javascripts. If you use Rails or Sprockets separatelyput this in your Javascript manifest usually in application. You can also load individual modules, provided you also require any dependencies. You can check dependencies in the Bootstrap JS documentation. Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process.

With Bootstrap 3 we have introduced a converter that automates this.

Carousel Portlet

Note: if you're just looking to use Bootstrap 3, see the installation section above. Upstream changes to the Bootstrap project can now be pulled in using the convert rake task. To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:. The latest converter script is located here and does the following:.

Conversion is automatic but requires instructions for certain transformations see converter output.

Liferay Tutorial 01 :- Installation of Liferay 6.2

Please submit GitHub issues tagged with conversion. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. Ruby Branch: master.Categories Categories Recent Posts Statistics. Home Liferay Portal English 3. Development Liferay 6. Sebastian Wikholm, modified 6 Years ago. Liferay 6. The navbar is working ok when not collapsed, when the screen gets smaller and the navbar menu collapses to a button, the button does not work.

Its easy to test with just adding an article with a navbar, can anybody help me getting a custom menu working? Thanks in advance. RE: Liferay 6. Ok, ive debugged this far: -Other bootstrap js things are working, bootstrap dropdwon and carousel tested -Bootstrap collapse is loaded and fired, tested with chrome developer tools and putting some breakpoints in the javascript -It should be adding and removing css classes in two divs and change a div style, it only changes the classes partially All the bootstrap code is tested without liferay first, and are all working, they only stop working when put in liferay, ie there seems to be some sort of conflict that disabled the correct functionality of a bootstrap navbar.

Fernando Cabrera, modified 5 Years ago. Hi Sebastian Did you find a solution? I have the same problem you described and my tests are quite similar to yours. I'm working with Liferay 6. Sebastian Wikholm, modified 5 Years ago. Yes i did, it was a simple css problem which i cant seem to remember what it was. Ill see if i can find it.

The problem was in the default classic theme, which i then changed in my theme. Thanks, finally I have a progress with the Bootstrap 2.

liferay bootstrap

Ali Elderov, modified 5 Years ago. Robert Rayas, modified 5 Years ago. I have the same issue with non-functional buttons when shrunk down to small size. What I've found is including the bootstrap breaks the portlet cog dropdowns and the top user bar. I haven't tried Jorge's fix though. I never found a workaround and had to go with straight css.This is the second and last part of my blog series for using existing Bootstrap themes into Liferay 6.

In this post I'll tell you how to use two of the available Bootstrap theme generators. So, as you may have noticed, you don't even have to know about bootstrap development for creating your own customizing themes after reading this post. Looks good, isn't it? As what it seems, the bootstrap generators creates a complete bootstrap css file. This means that the downloaded css is ready to use, and we have to override the bootstrap css file that is included in Liferay with this one.

This shouldn't cause any big issue in our theme if we are using Bootstrap 2. For testing purposes, we are going to change some colour of course you can customize whatever variable you want. Select a different color in "Scaffolding" section, linkColor variable, and click in "Apply" at the bottom of the page in my case, I chose green colour :.

For overrriding Liferay bootstrap css, we have to create this file in theme directory:. So far so good! Unfortunately, the generated css seems to not adjust portlets properly when resizing, among with other issues:. For overriding the responsive css part, and for future maintenance, we are going to create another file in theme:. Content would be as follows:. We can make other adjustments as well. Now you can build and deploy your theme.

liferay bootstrap

You have now a custom bootstrap theme with your own colour ready to use in Liferay 6. This is another great bootstrap theme generator you can find in the Internet, where you can create Bootstrap v.

Select "New" and then you can start configuring your theme. Before customizing the elements for the theme, you have to change to Bootstrap 2. For achieve that, select the "Settings" element in upper-left corner, and change the boostrap version, both for "Preview" and "Bootstrap Version" to 2. In left panel you'll see the variables which you can customize for creating your theme. In this case, we can simply change these two variables:.

So, now you have no reasons for not implementing your own bootstrap themes, even if you are not a frontend expert! Hope you liked it! Enjoy Liferay theme development. Help Create Join Login. Operations Management. IT Management. Project Management. Services Business VoIP. Resources Blog Articles Deals.

liferay bootstrap

Menu Help Create Join Login. Home Browse Liferay Portal News. Liferay Portal The world's leading open source portal Brought to you by: brianchandotcombwchanjhounjorgeferrerand 4 others. Hi again! Oh no!Users also like to visit their sites on every gadgets with proper arrangement of site elements and look and feel.

People are using liferay 6. As we are looking forward to make more responsive sites, Liferay 7 provides it with bootstrap 3 which is more efficient, coherent and more responsive than bootstrap 2. Liferay 7 provides rapid theme development using bootstrap 3. For theme development startup, Following requirements are needed. Startup Requirements Note : Change value according to your requirements. Deploy theme using command ant clean deploy.

Download sample theme war from below link :. For professional paid support, you may contact us at support surekhatech. Desclaimer: This example is developed using Liferay 7. This example might not work with other than beta versions. Follow the below steps to create a theme.

For now select classic as a parent theme. Click on Finish. Copy main. Mobile View. Tablet View. Desktop View. Large Desktop View. Average 0 Votes. Previous Next.

Liferay DXP: Technical Specifications

Don Baonguis.Plugins can be included individually though some have required dependenciesor all at once. Both bootstrap. This is Bootstrap's first class API and should be your first consideration when using a plugin. That said, in some situations it may be desirable to turn this functionality off. All public APIs are single, chainable methods, and return the collection acted upon.

All methods should accept an optional options object, a string which targets a particular method, or nothing which initiates a plugin with default behavior :. Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call.

Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive ex. All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

For simple transition effects, include bootstrap-transition. If you're using the compiled or minified bootstrap. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. This button should trigger a popover on click. This link and that link should have tooltips on hover. We set a fixed max-height on the. Watch it overflow with all this extra lorem ipsum text we've included. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *