bootstrap 4 overrides my css code example

Example: bootstrap override css

<!---------------- How do I override Bootstrap CSS? ------------------->

If your custom styles are not overriding the bootstrap styles, all you 
need to do is move the link to your custom stylesheet to a line after 
the bootstrap link:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">

This means that you first load the default bootstrap styles, then you 
can override some of those components with your own custom CSS.