Olá pessoal do Stackoverflow,
Estou usando o bootstrap, porém tem alguns estilos do bootstrap que não acho legal.
Estou colocando o meu estilo personalizado em um arquivo css, no entanto prevalece o estilo do bootstrap mesmo linkando o meu arquivo de estilos css depois do arquivo de estilos css do bootstrap.
Somente consigo alterar quando coloco a definição de estilo de forma inline no elemento.
Tem alguma outra forma de organizar os estilos sem conflitar com o bootstrap?
Esta seria uma amostra do código.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.panel-title-azul { color: blue; font-size: 24px; }
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title panel-title-azul">Cadastro</h3>
</div>
</div>
</body>
</html>
CSS:
.panel-title-azul {
color: blue;
font-size: 24px;
}
HTML:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="icon" href="{{ asset('images/icones/icone-logo.png') }}">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@stack('linkLayout1')
@stack('linkLayout2')
@stack('linkLayout3')
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
</body>
</html>
<!-- Este código faz parte de um outro arquivo que faz uso do layout principal por meio do framework Laravel -->
@push('linkLayout1')
<link rel="stylesheet" href="{{ asset('css/auth/register.css') }}">
@endpush
@extends('layout')
@section('content')
<section class="blocoPrincipal">
<div class="divisaoPrincipal">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title panel-title-azul">Faça seu cadastro no site</h3>
</div>
</div>
</div>
</section>
.panel-title-azul {
sem os : entre o azul e o { ... experimentou tirar ele já?