How to change the Jumbotron tag in the bootstrap in the google Chrome browser?

Asked

Viewed 3,057 times

0

Look carefully at the image;

inserir a descrição da imagem aqui

Now take a look at the code

<!-- 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-->

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

http://jsfiddle.net/juanmendez/C4Sjg/

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 look like this, but I didn’t succeed on the page

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

The file I’m trying to change is bootstrap.css, maybe it’s not succeeding because of a pump. The question is;

How do I change the color of the Jumbotron tag?

NOTE: all browsers have the expected result only do not have in google Chrome

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

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>
    <!-- Latest compiled and minified JavaScript -->
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>

</html>

my project

inserir a descrição da imagem aqui

jsf-2.2 bootstrap-3

2 answers

4


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

  • Fonts are not displayed when used with JSF

    1. You cannot 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" />

    Switch to if it’s production:

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

    Switch to if it’s development:

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

    When you load the bootstrap.js it also loads the . map

    1. With CSS too, something like:

    If it’s production, use only:

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

    If it’s 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, 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 may conflict with future updates, you should create one. css the part and it should come after the others, should stay 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 file add main.css:

.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 production 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 generally (preferably) we do not make updates, maintenance and tests directly in the software, since this can affect the functioning, for this we use the development environment and after all fixed (usually) we put the server in maintenance mode or "read" and then you should upload the files.

Arquivos . min

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

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

  • thank you so much for informing me, but the problem persisted.

  • 1

    @wladyband even with creating a main.css? You edited the bootstrap.css file a lot?

  • i just changed that part of bootstrap code.

  • 1

    @wladyband Back up the css folder, delete everything that has to do with bootstrap from the folder, download the clean (unedited) bootstrap and copy the "clean" bootstrap.css and bootstrap-Theme.css into the CSS folder, after that create the main.css file and put it in this order: <h:outputStylesheet library="css" name="bootstrap.css" />&#xA;<h:outputStylesheet library="css" name="bootstrap-theme.css" />&#xA;<h:outputStylesheet library="css" name="main.css" />. Then edit only main.css.

  • 1

    @wladyband I edited the answer, it now has the code of how to call the main.css and the order that should be the . css, I hope it helps.

  • 1

    Our man, thank you so much took it, it’s working just, really worth.

Show 1 more comment

1

I didn’t quite understand if this bootstrap you’re changing is what you created or is bootstrap’s Thema css..

But to change there are three ways:

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

2 - in the file hierarchy (e.g. calling the file bootstrap.css after all the other css files);

3 - or tag ! amps the property (ex. background-color: #ff3600 !important; )

A tip is to keep the document standard.. if you are using the color name, continue using the name, if you are using the hexadecimal, use only the Hex (replace Whit by #fff)

Browser other questions tagged jsf-2.2 bootstrap-3

You are not signed in. Login or sign up in order to post.