Bootstrap styling looks different with Laravel Spark?

Published 1 month ago by clat23

I recoded my app from a Laravel 5 installation to a new Laravel Spark installation. However I noticed that some of the bootstrap styling is off.

Take for example a bootstrap thumnail:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

In my Laravel 5 installation the thumbnail background is white. But in the Laravel Spark installation, the thumbnail background is gray.

Furthermore, the btn-warning button is yellow/green when it's supposed to be orange. There's no problems with the other buttons such as btn-primary and btn-success --- these buttons have blue and green styling respectively.

Does anyone know what is causing this?

Best Answer (As Selected By clat23)
Gorby

I've had some small issues as well with the template I use. Check the app.css for the styles. If I had my template css override the Spark default, it made a mess of Spark. Spark style override my style, some not so subtle changes to the template.

What I did was have a local css file to override the changes back to what I needed but that was time wasted to find what needed inheriting. I'm still having some issues with the Spark notification modal looking a bit fugly....

Gorby
Gorby
1 month ago (4,830 XP)

I've had some small issues as well with the template I use. Check the app.css for the styles. If I had my template css override the Spark default, it made a mess of Spark. Spark style override my style, some not so subtle changes to the template.

What I did was have a local css file to override the changes back to what I needed but that was time wasted to find what needed inheriting. I'm still having some issues with the Spark notification modal looking a bit fugly....

clat23

Thanks for the response @Gorby!

I found the .thumbnail and btn-warning styling in app.css and changing them worked. But now, it makes me wonder what else is off. Would it be safe to take the app.css from my non-Spark install of Laravel and overwrite my Laravel Spark's app.css?

Also what do you mean by "my template css"? Is this your app.css? And what do you mean by "Spark default"? Is this Spark's version of app.css?

clat23

Well, I took my non-Spark Laravel app.css and overwrote the app.css in Laravel Spark and the result was no styling whatsoever. So there goes that idea. I also looked at my non-Spark app.css and the styling for the .thumbnail background was also gray there too and same problems with the btn-warning. So is Laravel Spark not entirely pulling from app.css?

Gorby
Gorby
1 month ago (4,830 XP)

When I said "my template css", for the one I used, it was called style.css.

So in my case app.css is what Spark created and style.css is my default template css.

douglas_quaid

@clat23 Also having troubles with this. Why are the stylings different? What did you end up doing to fix this problem?

clat23

@douglas_quaid I followed Gorby's suggestion of editing the styles in app.css

I googled "twitter bootstrap colors" for hex codes to get the correct color codes.

Please let me know if you've found a better solution!

Sign In or create a forum account to participate in this discussion.