Page layout with CSS/Bootsstrap

Hi,

I want to create a web page with bootstrap with following layout (image attached). Can you please help me with some sample code how to achieve this layout with ASP.NET MVC/Bootstrap.

Basically there will be top three section and two split pane in that page.

sectiion1
---------------------
Secion2
----------------------
Section3
-------------------------------------------------
 vertical split pane with two sections.

Thanks,
Bootstrap.PNG
r_pat72Asked:
Who is Participating?
 
Miguel OzSoftware EngineerCommented:
This expert suggested creating a Gigs project.
It depends of what you need (mobile support, responsive), but the code below will give you a good start: (just added to your cshtml page)

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      Section1 contents
    </div>
    <div class="col-sm-12">
      Section2 contents
    </div>
    <div class="col-sm-12">
      Section3 contents
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3 col-xs-4">
      Vertical Section1 contents
    </div>
    <div class="col-sm-9 col-xs-8">
      Vertical Section2 contents
    </div>
  </div>
</div>


The above is a typical grid system explained below:  (The link below can be use to build content, you can create nested row/col classes)
https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
To implement tabs use:
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

If more help needed please specify the specific needs(e.g. Section x contains 3 tabs) , the base code is generic enough for you to fill up contents.
If you do have a big requirement you are better off creating a gig project
0
 
lenamtlCommented:
To understand how Bootstrap work
All the doc and examples https://getbootstrap.com/docs/4.0/getting-started/introduction/
To understand the grid https://getbootstrap.com/docs/4.0/layout/grid/
There are also several Udemy videos on that topic too.

You can use any admin Bootstrap template
I'm using AdminLte Bootstrap v3 https://adminlte.io/themes/AdminLTE/
https://github.com/almasaeed2010/AdminLTE

As BSv4 is stable now
you may prefer to use Bootstrap v4 template on Themeforest.
https://themeforest.net/category/site-templates/admin-templates?tags=bootstrap#content

For the server side code like ASP MVC then you will need to use a framework or create your own.
Here is a tutorial https://www.tutorialspoint.com/asp.net_mvc/asp.net_mvc_bootstrap.htm

Or use this script from Codecanyon https://codecanyon.net/item/aspnet-mvc-full-ajaxify-and-bootstrap-grid-with-crud-operation/19820914

You will find several tutorial on the net, you understand we cannot provide the whole code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.