EvilZone
Programming and Scripting => Web Oriented Coding => : shimomura May 02, 2014, 02:03:29 AM
-
I am using Bootstrap to create a sales page and have decided to use simpleCartjs as my java plugin for the cart. I'm calling on .simpleCart_items to display my cart. I can easily center the cart on a page without bootstrap. I've used every bootstrap class imaginable to try to center it. (span, text-centered, row-fluid, pagination-centered, ect) The cart output is in the form of a table. Any ideas. I'd like to maintain my bootstrap navbar for the checkout page or else I would just create a check out page without bootstrap.
-
Just declare a centred class in your CSS, e.g. like this:
.centred {
margin-left: auto;
margin-right: auto;
float: none;
}
and then use it, for instance <div class="simpleCart_items centred">
Just because you're using Bootstrap doesn't mean you have to strictly abide to everything it provides you. The whole point of Bootstrap and other design frameworks is that you mold them into anything that you want them to be. You use them as scaffolding.
Also, IIRC Bootstrap had a class called center-block. I'm not sure if it isn't deprecated by now, however.
-
I inlined that css to the cart and it just won't center. I want to completely restyle the cart and I cant figure out how to break the cart down into parts and style it god dammit.
-
Unfortunately auto never works as needed because it's based on all of the other elements around it which are never set correctly, in my experience, i would suggest ditching the table and making it a div (or a span if you want to get semantic) then make it absolute to the container around it and use margins as a % or an EM to make it appear center. This will also help you transform it into an adaptive site if you ever do decide to go down that road.
If you need more help than that then i would suggest putting in some code snippets (and make sure your not using any of the IE offspring to test it) and we can go from there.