My custom CSS is overwritten by the bootstrap CSS

Try the !important mention on your line.

Thank you very much!

app.css

th {
    padding: 15px !important;
}

Your web development experience (debugging) will be a lot smoother if you modify the Bootstrap source files and let that compile down instead of adding !important, which you should never be doing. That kinda stuff goes into CSS Shame file.

I was just reading about that:

https://css-tricks.com/when-using-important-is-the-right-choice/

However I was also reading that you should not mess directly with bootstrap because if you update it your custom changes will be lost. Any other, more maintainable, solutions?

I think that for few changes overriding some rules is a good way because we keep the CDN loading of standard Bootstrap. For deeper changes editing Sass or LESS Bootstrap sources and compiling them is the good choice. In this case you must organize your file to keep a folder with unchanged core files and only play with @import to get your work maintenable.

OP is using Elixir, if you're using CDN you might approach it differently... even then I would still add additional classes to the HTML and have those represent something more than just th {}. If you can't modify the HTML then !important might be your solution, but I try to avoid it like a plague. If you ever had to debug WordPress themes (or just about any larger "app") you would understand the troubles of using it. CSS, the C stands for cascade which means the !important will cascade down to components that also contain th {}, but that might not be your desired outcome.

Here's a simple but trivial example: http://codepen.io/alenabdula/pen/PPaBJz

Watch this presentation by Harry Roberts about ITCSS

It's not a tool or anything you have to install, just methodology.

Which one is called first in your CSS file? The ordering can change what is used.

http://stackoverflow.com/questions/5902858/order-of-prioritization-when-using-multiple-contradictory-css-files

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

A better solution, don't use bootstrap, write your own CSS.

@jlrdw Writing your own grid system in CSS and all the media queries is time consuming. If you want to just use parts of BS to get that stuff quickly, it's a good idea to use it?

Should be either extending BS (by adding classes to the part you want to change) or using your custom CSS in a file after the BS library.

@jlrdw are you serious? With that logic, why use Laravel? Write your own PHP.

Comments like that don't help, give constructive advice, with examples and explanations.

@cshopb as bashy said, the order matters. Usually it is best to put your vendor dependencies first (things like Bootstrap - that other people have made) and then place your changes after it. CSS is compiled top to bottom, and it is the last value that you use that takes precedence. Using !important isn't best practice as it is very hard to debug (however at times it is necessary, it's up to you to determine when).

I am neutral on the issue: See https://laracasts.com/discuss/channels/laravel/my-laravel-5116-didnt-come-with-twitter-bootstrap
What did the world do before bootstrap? Really a custom media query isn't that hard to accomplish.
This

@media screen and (max-width: 1024px){
    body {
    width:100%;
    background-color: #D3D3D3;
    background-image: url(images/multibg.jpg);
}
body,td,th {
    font-size: 20px;
    color: #330099;
    font-family: "Times New Roman", Times, serif;
}
    
    
    .mfont2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.4em;
    font-weight: bold;
    color: rgb(51, 0, 153);
    font-style: normal;
}

}

Is all it took to fix a page for a mobile device, that was not hard to do. I am not saying don't use bootstrap, I'm
just saying it's not required, it's by choice.

I agree with you that Bootstrap has it's place, but neither of your responses address the OP's question at all.

Bootstrap isn't solely used for media queries anyway, many people do use it just for that. Others use it for the consistent styling. While you say, "write your own", others would say "don't reinvent the wheel" - I'm in the second camp.

A followup, you asked

@jlrdw are you serious? With that logic, why use Laravel? Write your own PHP.

My answer, bootstrap has nothing to do with the server side php. I use laravel as a database management system
The same way I used dbase 3, visual foxpro, and later java servlets, jsp, and javabeans. But I was the database manager at a large trucking company, it was a business application I wrote and maintained over the years, truck dispatch, accounts receivable, accounts payable, driver payroll, etc.
So the usage of a framework can be widespread. I don't care about some of these modern looking sites with the thrills and over use of javascript. My focus is buisness style application. If you ever used microsoft access, and entered data on a form, that type of thing. 100 different laravel users might have 100 different styles or ways of styling the application. Not dis-agreeing with someone who wants a 90% javascript / ajax site.
I was just saying bootstrap isn't the only answer.
I know, what a long answer.

I might try bootstrap after reading this, I want to see more about it handling media queries, That is if it does it for you. I will read up more on it. If a page is styled for a desktop or laptop view, and bootstrap will in turm make it mobile-friendly as well now that would be a time saver.

@jlrdw Bootstrap is "mobile first" meaning that it is built for mobile devices first and foremost, unlike a few years ago when mobile was an after thought.

Bootstrap is a great tool, as are the countless others.

Bootstrap version 4 is in alpha at the moment, both that and the current version 3.3.5 are definitely worth taking a look at.

I will definitely go to the bootstrap site and study it more.

@bashy @mstnorris As I mentioned I am quite new. So I assumed that the order of mixing in SASS is the way I put them in the gulpfile. If yes then my custom CSS is the last one being added. I tried putting it in as a first element but it didn't change the result.

@cshopb Maybe it's only when it's different files. I've never had the situation where this has happened since I override the styles by using new classes on top of BS's. Can you not use a class on the table and add your styles to that? Anything MORE specific in CSS will be used.

@bashy Yes, I can use classes, they are working fine. I thought I could override the th without the need to add classes just to change the padding. But if that is the only way and the !important is not recommended I will do it like that.