CODEWITHSUNDEEP
csstwitter-bootstrapjoomlacomponents
twan
twan

Reputation: 2659

How can I use bootstrap to style my custom joomla component

I am trying to style my custom joomla component but found out using standard bootstrap syntax is not working.

I tried the following:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-8">

        </div>
    </div>
</div>

But the columns are stacked under eachother. I tried adding the bootstrap CDN in my component page, but the Joomla menu falls apart when doing that.

What can I do to make bootstrap work?

Upvotes: 1

Views: 469

Answers (2)

Neil Robertson
Neil Robertson

Reputation: 3345

The default Joomla 3.x templates and many third party Joomla templates use Bootstrap 2 so Bootstrap 3 or 4 column classes won't necessarily work.

You have a few options:

  • Use column classes from the version of Bootstrap that is being loaded on your Joomla website
  • Replace the version of Bootstrap that is being loaded with Bootstrap 4 using a third party extension e.g. Toggle Bootstrap (free) or jQuery Easy (free) or similar
  • Manually code a solution to replace the version of Bootstrap that is being loaded with Bootstrap 4 (for some example code for this, see the answers to https://joomla.stackexchange.com/q/4953/120)
  • Change to a Bootstrap 4 template such as JoomShaper Helix Ultimate (free)

I recommend the last option at this will put you in good shape for the upgrade to Joomla 4 within the next 12 months or so. Joomla 4 will use Bootstrap 4.

Upvotes: 2

Amelia Magee
Amelia Magee

Reputation: 512

col-md-x will only activate on medium screen sizes (768px) or higher since bootstrap is a mobile first approach. Try changing col-md-4 and col-md-8 to col-4 and col-8

Upvotes: 0

Related Questions