Display the data into parts using Bootstrap

vorkow
 
on May 07, 2022 04:27 AM
317 Views

Is there an optimal way?

I have read several articles. Every thing is different for everyone.

I want to get the structure as in the picture.

https://ibb.co/fdB3Bbg

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 09, 2022 12:15 AM

Refer below code.

HTML

<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">Header</div>
                </div>
                <div class="row">
                    <div class="col-sm-2">
                        <div class="row">
                            <div class="col-sm-2">Left</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                        <hr />
                        <footer>
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                        <p>&copy; <%: DateTime.Now.Year %> - ASPSnippets</p>
                                    </div>
                                </div>
                            </div>
                        </footer>
                    </div>
                    <div class="col-sm-2">
                        <div class="row">
                            <div class="col-sm-2">Right</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>