使用Web表单在母版页中引导巨型机和contentplaceholder

Question

Just starting with Bootstrap and Webforms.

I've noticed that when using Master Pages and in the contentplaceholder when placing a jumbotron in it doesn't stretch across the width of the screen, but when placing the jumbotron in the Master Page outside the contentplaceholder it does.

So doing some research I found out that I can use multiples contentplaceholder, changing the style for the Jumbotron ones like this:

Master:

    <div style="width:100%;padding-left:0px;padding-right:0px;">
        <asp:ContentPlaceHolder ID="Jumbotron" runat="server">

        </asp:ContentPlaceHolder>
    </div>

.aspx:

<asp:Content ID="Content2" ContentPlaceHolderID="Jumbotron" runat="server">
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
    </div> 
</asp:Content>

But if I want several Jumbotron in the page I'll have to create several contentplaceholder in the Master, that perhaps I even not use in others webforms using the same MasterPage. I can also use different MasterPages, but do you guys have any idea on how to avoid this, perhaps a different way to do it?

Answer 1

This is what I found (thanks to sringland for suggest me to use developer tools)

Master

        <!-- For Jumbotron to work in 100% width -->
        <div style="width:100%;padding-left:0px;padding-right:0px;">
            <asp:ContentPlaceHolder ID="Jumbotron" runat="server">

            </asp:ContentPlaceHolder>
        </div>        

        <!-- For the rest of the contents -->
        <div style="width:100%;padding-left:0px;padding-right:0px;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>

            <hr />

            <div class="container">
                <footer>
                    <p>&copy; 2015 Company, Inc.</p>                
                </footer>
            </div>            
        </div> 

The For Jumbotron to work in 100% width part is no longer needed. I just use the same css within the main ContentPlaceHolder (ContentPlaceHolder1) and add another div with class container to the footer.

This way I'm able to use either container divs or Jumbotron in the webforms that uses that Master, like below sample:

.aspx

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <!-- Example row of columns -->
        <div class="row">
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
    </div> 

</asp:Content>