Bootstrap Conversion: Columns Wrapping, Not Floating

I’ve been requested to convert this site to be responsive. I’m attempting to change the code to use Bootstrap. One attempt is converting the ‘Our Services Include’ section (rebuilding the site is not an option).

In this section, class “wrapper” will be converted to “container”. With that being said, any elements I try to convert to ‘col-sm-6’ inside the tabs container, the elements wrap underneath each other instead of floating next to each other.

You can see a screenshot of what it looks like.

I don’t have the code changes save, just merely using a developer tool to show you the sample. Does someone else see additional code that is causing these columns not to float? It seems that no matter where I change the code, floated columns won’t float.

Hi,

The floats are too wide because they are 50% plus 15px padding. Bootstrap uses the box-sizing:border-box method which you seem to have omitted. :slight_smile:

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
:after, :before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
2 Likes

:open_mouth:
oops. You’re right. That did fix the issue.

Thank you, PaulOB.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.