How to change Jumbotron tag in bootstrap in google chrome browser?

Navigation
0

Look closely at the image;

Nowtakealookatthecode

<!--jumbotron--><divclass="jumbotron">
    <div class="container text-center">
        <h1>JWB Tecnologia</h1>
        <p>Este portal foi criado para auxiliar as empresas e
            profissionais que buscam informações sobre Sistemas ERP. Para
            ajudá-lo em sua pesquisa, selecionamos as principais informações
            sobre Sistema ERP para que esta ferramenta possa contribuir ao
            máximo para a melhoria da qualidade de seus serviços e a
            competitividade de sua empresa.</p>

        <div class="btn-group">

            <h:link styleClass="btn btn-lg btn-warning">Download App</h:link>
            <h:link styleClass="btn btn-lg btn-default">Loja Virtual</h:link>
            <h:link styleClass="btn btn-lg btn-warning">Lista de ERP</h:link>

        </div>
    </div>
    <!-- End container -->
</div>
<!-- End jumbotron-->

I created a JSF + Maven project, it is correctly configured to have Bootstrap in the project, and I can not change the color of the Jumbotron tag as in the template below;

link

this is my code in my bootstrap.css file 

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}

I modified it to be this way, but I did not succeed in the page 

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    background-color: #ff3600;
    color: white;
}

The file I am trying to change is bootstrap.css, it may not be successful because of a pumping. The question is;

How do I change the color of the Jumbotron tag?

===================================================== ============================

My page 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />



</h:head>


<style>
body {
    padding-top: 40px;
}
</style>

<h:body data-spy="scroll" data-target="#my-navbar">


    <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#navbar-collapse">
                <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span>
            </button>

            <h:link styleClass="navbar-brand">Quem somos</h:link>

        </div>
        <!-- Navbar Header-->
        <div class="collapse navbar-collapse" id="navbar-collapse">

            <h:link styleClass="btn btn-warning navbar-btn navbar-right">Download agora</h:link>
            <ul class="nav navbar-nav">
                <li><h:link>Fotos</h:link></li>
                <li><h:link>Características</h:link></li>
                <li><h:link>Faq</h:link></li>
                <li><h:link>Fale Conosco</h:link></li>
            </ul>
        </div>
    </div>
    <!-- End Container--> </nav>
    <!-- End navbar -->

    <!-- jumbotron-->

    <div class="jumbotron">
        <div class="container text-center">
            <h1>JWB Tecnologia</h1>
            <p>Este portal foi criado para auxiliar as empresas e
                profissionais que buscam informações sobre Sistemas ERP. Para
                ajudá-lo em sua pesquisa, selecionamos as principais informações
                sobre Sistema ERP para que esta ferramenta possa contribuir ao
                máximo para a melhoria da qualidade de seus serviços e a
                competitividade de sua empresa.</p>

            <div class="btn-group">

                <h:link styleClass="btn btn-lg btn-warning">Download App</h:link>
                <h:link styleClass="btn btn-lg btn-default">Loja Virtual</h:link>
                <h:link styleClass="btn btn-lg btn-warning">Lista de ERP</h:link>


            </div>
        </div>
        <!-- End container -->
    </div>
    <!-- End jumbotron-->


    <!-- Feedback-->
    <div class="container">
        <section>
        <div class="page-header" id="feedback">
            <h2>
                Frases de Grandes Empresários<small> Leia com atenção</small>
            </h2>
        </div>

        <div class="row">
            <div class="col-md-4">
                <blockquote>
                    <p>Seus clientes mais insatisfeitos são sua melhor fonte de
                        aprendizado.</p>
                    <footer>Bill Gates</footer>
                </blockquote>
            </div>
            <div class="col-md-4">
                <blockquote>
                    <p>Não deixe o barulho da opinião dos outros abafar sua voz
                        interior. E mais importante, tenha a coragem de seguir seu coração
                        e sua intuição. Eles de alguma forma já sabem o que você realmente
                        quer se tornar. Tudo o mais é secundário.</p>
                    <footer>Steve Jobs</footer>
                </blockquote>
            </div>
            <div class="col-md-4">
                <blockquote>
                    <p>Não deixe o barulho da opinião dos outros abafar sua voz
                        interior. E mais importante, tenha a coragem de seguir seu coração
                        e sua intuição. Eles de alguma forma já sabem o que você realmente
                        quer se tornar. Tudo o mais é secundário.</p>
                    <footer>Mark Zuckerberg - fundados do Facebook</footer>
                </blockquote>
            </div>
        </div>
        <!-- End row --> </section>
    </div>
    <!--End Container-->


    <!-- call to action -->
    <section>
    <div class="well">
        <div class="container text-center">
            <h3>Inscreva-se agora</h3>
            <p>Digite seu nome e e-mail</p>

            <form action="" class="form-inline">

                <div class="form-group">

                    <h:outputLabel value="Nome" />
                    <h:inputText styleClass="form-control" id="subscription" />
                </div>
                <div class="form-group">
                    <h:outputLabel value="Email " />
                    <h:inputText styleClass="form-control" id="email" />
                </div>
                <h:button styleClass="btn btn-default" value="Cadastrar" />
            </form>


        </div>
        <!-- end Container-->

    </div>
    <!-- end well--> </section>
    <!-- Call to action -->

    <!-- Gallery -->
    <div class="container">
        <section>
        <div class="page-header" id="galeria">
            <h2>
                Trabalhos Realizados<small> Verifique as Imagens</small>
            </h2>
        </div>

        <div class="carousel slide" id="screenshot-carousel"
            data-ride="carousel">
            <ol class="carousel-indicators">

                <!--                http://stackoverflow.com/questions/21944735/what-is-the-data-target-attribute-in-bootstrap-3 -->

                <li data-target="#screenshot-carousel" data-slide-to="0"
                    class="active"></li>
                <li data-target="#screenshot-carousel" data-slide-to="1"></li>
                <li data-target="#screenshot-carousel" data-slide-to="2"></li>
                <li data-target="#screenshot-carousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <h:graphicImage library="imagens" name="highway.jpg" />
                    alt="Text of the image" />
                    <div class="carousel-caption">
                        <h3>Sistema de controle de trafeco</h3>
                        <p>Foi implementado um sistema para o governo do RS</p>
                    </div>
                </div>
                <div class="item">
                    <h:graphicImage library="imagens" name="river.jpg" />
                    alt="Text of the image" />
                    <div class="carousel-caption">
                        <h3>Sistema Integrado em São Lourenço</h3>
                        <p>Foi para o governo do estado</p>
                    </div>
                </div>
                <div class="item">
                    <h:graphicImage library="imagens" name="street.jpg" />
                    alt="Text of the image" />

                    <div class="carousel-caption">
                        <h3>Street heading</h3>
                        <p>Sistema para pavimentação privada</p>
                    </div>
                </div>
                <div class="item">
                    <h:graphicImage library="imagens" name="painting.jpg" />
                    alt="Text of the image" />

                    <div class="carousel-caption">
                        <h3>Ana Paola de Souza Alves</h3>
                        <p>Foi implementado um sistema integrado</p>
                    </div>
                </div>

            </div>
            <!-- End Carousel inner -->

            <!--            Não conseguir fazer funcionar isso direito -->

            <a href="#screenshot-carousel" class="left carousel-control"
                data-slide="prev"> <span
                class="glyphicon glyphicon-chevron-left"></span>
            </a> <a href="#screenshot-carousel" class="right carousel-control"
                data-slide="next"> <span
                class="glyphicon glyphicon-chevron-right"></span>
            </a>


        </div>
        <!-- End Carousel --> </section>
    </div>


    <!-- features -->
    <div class="container">
        <section>
        <div class="page-header" id="features">
            <h2>
                Features.<small> Some of the coolest Features of this app.</small>
            </h2>
        </div>
        <!-- End Page Header -->

        <div class="row">
            <div class="col-sm-8">
                <h3>This is the heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
                    mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa.
                    Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
            </div>
            <div class="col-sm-4">
                <h:graphicImage library="imagens" name="imac.jpg"
                    styleClass="img-responsive" />

            </div>
        </div>
        <!-- End row -->
        <div class="row">
            <div class="col-sm-8">
                <h3>This is the heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
                    mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa.
                    Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
            </div>
            <div class="col-sm-4">
                <h:graphicImage library="imagens" name="smartphone.jpg"
                    styleClass="img-responsive" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <h3>This is the heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
                    mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa.
                    Proin et odio mattis, venenatis lacus vel, faucibus elit
                    777777777777777777777777777777777777777777777777777</p>
            </div>
            <div class="col-sm-4">
                <h:graphicImage library="imagens" name="user.jpg"
                    styleClass="img-responsive" />
            </div>
        </div>
        <br />
        <p:separator />

        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-ok"></span>
                        <h4>This is the Heading</h4>
                        <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                            Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                            lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                            euismod dui</p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-star"></span>
                        <h4>This is the Heading</h4>
                        <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                            Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                            lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                            euismod dui</p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-play-circle"></span>
                        <h4>This is the Heading</h4>
                        <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                            Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                            lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                            euismod dui</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row --> </section>
    </div>
    <!-- End Container -->


    <!-- Faq -->

    <div class="container">
        <section>
        <div class="page-header" id="faq">
            <h2>
                FAQ.<small> Engaging with consumers.</small>
            </h2>
        </div>
        <!-- End Page Header -->

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <a href="#collapse-1" data-toggle="collapse"
                            data-parent="#accordion"> Question one? </a>
                    </div>
                    <!-- End panel title -->
                    <div id="collapse-1" class="panel-collapse collapse in">
                        <div class="panel-body">Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit. Donec egestas non urna in fringilla.
                            Praesent consequat est at feugiat faucibus</div>
                    </div>
                    <!-- End Panel collapse -->
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <a href="#collapse-2" data-toggle="collapse"
                            data-parent="#accordion"> Question Two? </a>
                    </div>
                    <!-- End panel title -->
                    <div id="collapse-2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit. Donec egestas non urna in fringilla.
                            Praesent consequat est at feugiat faucibus</div>
                    </div>
                    <!-- End Panel collapse -->
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <a href="#collapse-3" data-toggle="collapse"
                            data-parent="#accordion"> Question Three? </a>
                    </div>
                    <!-- End panel title -->
                    <div id="collapse-3" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit. Donec egestas non urna in fringilla.
                            Praesent consequat est at feugiat faucibus</div>
                    </div>
                    <!-- End Panel collapse -->
                </div>
            </div>
        </div>
        <!-- End panel group --> </section>
    </div>
    <!-- End container -->


    <!-- Footer -->

    <footer>
    <div class="container text-center">


        <ul class="list-inline">
            <li><a href="http://www.twitter.com">Twitter</a></li>
            <li><a href="http://www.facebook.com">Facebook</a></li>
            <li><a href="http://www.youtube.com">YouTube</a></li>
        </ul>

        <p>&copy; Copyright @ 2015 Desenvolvido por Wladimir</p>

    </div>
    <!-- end Container--> </footer>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>

</html>

My project

    
asked by anonymous 24.08.2015 / 12:51

2 answers

4

I think the problem here is part of what I mentioned in this question:

  • Fonts are not displayed when used with JSF

  • You can not load bootstrap.js and bootstrap.min.js together

    • bootstrap.js is for development
    • bootstrap.min.js is for production

    • Here: 

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

    Change for production: 

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

    Switch to development: 

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

    When you load bootstrap.js it also loads .map

  • With CSS too, something like:

         

    • If it is production, use only: 

     <h:outputStylesheet library="css" name="bootstrap.min.css" />
 <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />

    If it is development, use only: 

     <h:outputStylesheet library="css" name="bootstrap.css" />
 <h:outputStylesheet library="css" name="bootstrap-theme.css" />

Note that the theme should always come after the bootstrap, so as not to break the hierarchy.

Do not edit the original files

Instead of modifying the bootstrap files, which in my view is a bad practice because it can conflict with future updates, you should create a .css part and it should come after the others, it should look like this:

  • Development Environment: 

    <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="main.css" /> <!-- Seu arquivo customizavel -->

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
</h:head>

  • Production Environment: 

    <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
    <h:outputStylesheet library="css" name="main.css" /> <!-- Seu arquivo customizavel -->

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
</h:head>

In this main.css file add: 

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}

Development environment

It is the environment used only for the creation, development and testing of software created or maintained by you or a team.

Production environment

It is the environment used only to generate the output or work that the software must perform, for example if it is a cash flow software used in a network (internal or external) when the user uses it is what we call "production". In this environment we usually (preferably) do not do updates, maintenance and testing directly on the software, as this may affect the operation, for this we use the development environment and after all corrected (usually) in maintenance or "read" mode and then you should upload the files.

.min files

The .min.js and .min.css files are only used (usually) in the production environment, it is a compressed version of the original CSS and JS.

In the development environment we use only .js and .css (without .min).

    
24.08.2015 / 16:32
1

I do not understand if this bootstrap that you are changing is what you created or is the bootstrap thema css ..

But to change there are three ways:

1 - in the hierarchy of selectors (eg #SeletorPai .jumbotron {} );

2 - in the hierarchy of the files (eg call the file bootstrap.css after all other css files);

3 - or put the! important tag property (eg background-color: #ff3600 !important; )

24.08.2015 / 14:31
How to implement a function to return the sum of squares of the proposed form? Export SQL Server Database 2014