How to add Bootstrap to .NET MAUI

Question

How to add Bootstrap to .NET MAUI

Kalyan A 440

The below foreach shows table in windows but not in Android phone , in Android it doesnt show as a table ,

please suggest if this a bootstrap issue and how to add bootstrap to .NET.

<button @onclick="Submit">Perform Calc</button>            <div>           Ascending Order /        Count  </div> <ol>    @foreach (var todo in  sumgroups)    {        <li>                        <input readonly @bind="todo.Title" />             <input readonly @bind="todo.cnts" />        </li>    }</ol>

@page "/DataHandling"
 
@using System.ComponentModel.DataAnnotations;  
 
  
<PageTitle>Probability</PageTitle>
 
<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox"  @bind="todo.IsDone" />
            <input  readonly @bind="todo.Title"  />
        </li>
    }
</ul
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add</button> <br>
<button @onclick="DeleteTodo">Delete</button>
<div>
           Ascending Order  
  </div>
 <ol>
    @foreach (var todo in  listsort)
    {
        <li>
            
            <input readonly @bind="todo.Title" />
           
        </li>
    }
</ol>
<button @onclick="Submit">Perform Calc</button>
  <div>
           Ascending Order /        Count
  </div>
 <ol>
    @foreach (var todo in  sumgroups)
    {
        <li>
            
            <input readonly @bind="todo.Title" />
             <input readonly @bind="todo.cnts" />
        </li>
    }
</ol>
<div>
   Max:
  </div>
<div>
    @maxnum
    </div>
      <br />
      <div>
    Min:
  </div>
<div>
    @minnum
    </div>
      <br />
<div>
    Range:
  </div>
<div>
    @ran
    </div>
      <br />
    <div>
    Count:
  </div>
<div>
    @rancnt
    </div>
 
         <br />
    <div>
    Sum:
  </div>
<div>
    @meansum
    </div>
         <br />
    <div>
    Mean:
  </div>
<div>
    @calcmean
    </div>
         <br />
  <div>
    Mode 
  </div>  
  
  <div>
  <ul>
     
            @for (int i = 0; i < myNum.Length; i++)
            {
                <li>
                    @if (display == "Y")
                    {
                        @myNum[i]
                    }
                </li>
            }
 
</ul>
 </div>  
       <br />
 <div>
    Mid Value
  </div>  
 @if( (val0>0) &&    (display == "Y"))
{
    <div>
        @val0
        </div>
}
 @if((val1>0)  && (val0==0)&& (display == "Y"))
{
    <div>
       @val1
        </div>
  <br />
  <div>
       @val2
        </div>
}
  <br />
  <div>
      Median
      </div>  
      <div>
    @calcmedian
    </div>
<div>
  
        @errmsg
    </div>
 
@code {
    public class TodoItem
    {
        public int Title { get; set; }
        public bool IsDone { get; set; }
    }
    public class  Groups
    {
        public int Title { get; set; }
    }
    public class  Summary
    {
        public int Title { get; set; }
        public int cnts { get; set; }
    }
    private List<TodoItem> todos = new();
    private List<TodoItem> listsort = new();
    private int newTodo; int rancnt; int meansum; int maxnum;int minnum; int val1;int val2; int val0;
    private string errmsg;private string skip; private int max;private int ran; private decimal calcmean; private decimal calcmedian; int median = 0; private int[] myNum = { 0  }   ; 
    private List<Groups> modegroups = new();
    private List<Groups> tempgroups = new(); private string display = "N"; private int[] medarr; 
    private List<Summary> sumgroups = new();
    protected override void OnInitialized()
    {
    }
    private void DeleteTodo()
    {
        display = "N";  
        ran = 0;maxnum = 0;minnum= 0;
        rancnt = 0;meansum = 0; calcmean = 0;calcmedian = 0; val0 =0;val1 = 0;val2 = 0;
        int rem = todos.Count((s => s.IsDone == true));
        sumgroups.Clear();
        if (rem > 0)
        {
            var toRemove = todos.Where(todos => todos.IsDone == true).ToList();  
            foreach (var s in toRemove)
            {
                todos.Remove(s);
            }
        }
        listsort = todos.OrderBy(p => p.Title).ToList();
    }
    private void AddTodo()
    {     display = "N";
        myNum[0] = 0;maxnum = 0;minnum= 0;  val0 =0; val1 = 0;val2 = 0;
       
        sumgroups.Clear();
        ran = 0;
        rancnt = 0;meansum = 0;calcmean = 0;calcmedian = 0;
        errmsg = "";
        skip = "N";
        errmsg = "";
        if( (newTodo <  0) ||   (newTodo > 100)) 
        { skip = "Y"; 
            errmsg = "Enter number between 0 and 100";}
        int cnt  = todos.Count();
        if (cnt>20)
        {   skip = "Y"; 
            errmsg = "Cannot enter number more than 20 numbers";}
        if(skip=="N")
        { 
            todos.Add(new TodoItem { Title = newTodo });
        }
        newTodo = 0;
        listsort = todos.OrderBy(p => p.Title).ToList(); 
    }
    private void Submit()
    { display = "Y";
        meansum = todos.Sum(p => p.Title) ;
        rancnt = todos.Count();
        if (rancnt >0)
        {
            maxnum = todos.Max(p => p.Title);
            minnum=todos.Min(p => p.Title) ;
            ran =   todos.Max(p => p.Title)-todos.Min(p => p.Title) ;
            calcmean = Math.Round( Decimal.Divide(meansum ,  rancnt),2)  ;
            //
            var tempgroups =listsort.GroupBy(n => n.Title)
                             .Select(n => new
                             {
                                 Title = n.Key,
                                 TitleCount = n.Count()
                             })
                             .OrderBy(n => n.Title);
            sumgroups = tempgroups.Select( g => new Summary { Title = g.Title, cnts = g.TitleCount } ).ToList();
            int groupmax = tempgroups.Max(p => p. TitleCount );
            var   modegroup  =tempgroups.Where(groups => groups.TitleCount == groupmax).Select(n =>  n.Title ).ToList();
            myNum =   modegroup.ToArray();
            var   medgroup  =listsort.Select(n =>  n.Title ).ToList();
            medarr = medgroup.ToArray();
            int size = medarr.Length;
            int mid = size/2;
            // int median = 0;
            if ((size % 2) != 0){
                val0 =  medarr[mid];
                calcmedian =  medarr[mid];
        
                
            }
            else {
                  val1 = medarr[mid - 1];
                 val2 = medarr[mid];
                 
                int val3 = val1 + val2;
                calcmedian = Decimal.Divide(val3,2);
                calcmedian = Math.Round(calcmedian, 2);
            }
         }}
}

3 answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

Bootstrap officially provides a complete solution for the Maui Blazor app.

You'll need to refer to Getting started - MAUI Blazor Hybrid App (.NET 8) to integrate it into your Maui application.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

You can use the chrome remote debugger to debug your css:

https://developer.android.com/develop/ui/views/layout/webapps/debugging

Answer 3

I added table it works

@page "/DataHandling"
 
@using System.ComponentModel.DataAnnotations;  
 
  
<PageTitle>Probability</PageTitle>
 
<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox"  @bind="todo.IsDone" />
            <input  readonly @bind="todo.Title"  />
        </li>
    }
</ul
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add</button> <br>
<button @onclick="DeleteTodo">Delete</button>
<div>
           Ascending Order  
  </div>
 <ol>
    @foreach (var todo in  listsort)
    {
        <li>
            
            <input readonly @bind="todo.Title" />
           
        </li>
    }
</ol>
<button @onclick="Submit">Perform Calc</button>
<table>
          <tr>
           
 
           <th>
          Number
            </th>
            <th>
            Count 
            </th>
             </tr> 
    @foreach (var todo in  sumgroups)
    {
       <tr>
            <td>
            
            <input readonly @bind="todo.Title" />
              </td>
               <td>
             <input readonly @bind="todo.cnts" />
             </td>
       </tr>
    }
 </table> 
<div>
   Max:
  </div>
<div>
    @maxnum
    </div>
      <br />
      <div>
    Min:
  </div>
<div>
    @minnum
    </div>
      <br />
<div>
    Range:
  </div>
<div>
    @ran
    </div>
      <br />
    <div>
    Count:
  </div>
<div>
    @rancnt
    </div>
 
         <br />
    <div>
    Sum:
  </div>
<div>
    @meansum
    </div>
         <br />
    <div>
    Mean:
  </div>
<div>
    @calcmean
    </div>
         <br />
  <div>
    Mode 
  </div>  
  
  <div>
  <ul>
     
            @for (int i = 0; i < myNum.Length; i++)
            {
                <li>
                    @if (display == "Y")
                    {
                        @myNum[i]
                    }
                </li>
            }
 
</ul>
 </div>  
       <br />
 <div>
    Mid Value
  </div>  
 @if( (val0>0) &&    (display == "Y"))
{
    <div>
        @val0
        </div>
}
 @if((val1>0)  && (val0==0)&& (display == "Y"))
{
    <div>
       @val1
        </div>
  <br />
  <div>
       @val2
        </div>
}
  <br />
  <div>
      Median
      </div>  
      <div>
    @calcmedian
    </div>
<div>
  
        @errmsg
    </div>
 
@code {
    public class TodoItem
    {
        public int Title { get; set; }
        public bool IsDone { get; set; }
    }
    public class  Groups
    {
        public int Title { get; set; }
    }
    public class  Summary
    {
        public int Title { get; set; }
        public int cnts { get; set; }
    }
    private List<TodoItem> todos = new();
    private List<TodoItem> listsort = new();
    private int newTodo; int rancnt; int meansum; int maxnum;int minnum; int val1;int val2; int val0;
    private string errmsg;private string skip; private int max;private int ran; private decimal calcmean; private decimal calcmedian; int median = 0; private int[] myNum = { 0  }   ; 
    private List<Groups> modegroups = new();
    private List<Groups> tempgroups = new(); private string display = "N"; private int[] medarr; 
    private List<Summary> sumgroups = new();
    protected override void OnInitialized()
    {
    }
    private void DeleteTodo()
    {
        display = "N";  
        ran = 0;maxnum = 0;minnum= 0;
        rancnt = 0;meansum = 0; calcmean = 0;calcmedian = 0; val0 =0;val1 = 0;val2 = 0;
        int rem = todos.Count((s => s.IsDone == true));
        sumgroups.Clear();
        if (rem > 0)
        {
            var toRemove = todos.Where(todos => todos.IsDone == true).ToList();  
            foreach (var s in toRemove)
            {
                todos.Remove(s);
            }
        }
        listsort = todos.OrderBy(p => p.Title).ToList();
    }
    private void AddTodo()
    {     display = "N";
        myNum[0] = 0;maxnum = 0;minnum= 0;  val0 =0; val1 = 0;val2 = 0;
       
        sumgroups.Clear();
        ran = 0;
        rancnt = 0;meansum = 0;calcmean = 0;calcmedian = 0;
        errmsg = "";
        skip = "N";
        errmsg = "";
        if( (newTodo <  0) ||   (newTodo > 100)) 
        { skip = "Y"; 
            errmsg = "Enter number between 0 and 100";}
        int cnt  = todos.Count();
        if (cnt>20)
        {   skip = "Y"; 
            errmsg = "Cannot enter number more than 20 numbers";}
        if(skip=="N")
        { 
            todos.Add(new TodoItem { Title = newTodo });
        }
        newTodo = 0;
        listsort = todos.OrderBy(p => p.Title).ToList(); 
    }
    private void Submit()
    { display = "Y";
        meansum = todos.Sum(p => p.Title) ;
        rancnt = todos.Count();
        if (rancnt >0)
        {
            maxnum = todos.Max(p => p.Title);
            minnum=todos.Min(p => p.Title) ;
            ran =   todos.Max(p => p.Title)-todos.Min(p => p.Title) ;
            calcmean = Math.Round( Decimal.Divide(meansum ,  rancnt),2)  ;
            //
            var tempgroups =listsort.GroupBy(n => n.Title)
                             .Select(n => new
                             {
                                 Title = n.Key,
                                 TitleCount = n.Count()
                             })
                             .OrderBy(n => n.Title);
            sumgroups = tempgroups.Select( g => new Summary { Title = g.Title, cnts = g.TitleCount } ).ToList();
            int groupmax = tempgroups.Max(p => p. TitleCount );
            var   modegroup  =tempgroups.Where(groups => groups.TitleCount == groupmax).Select(n =>  n.Title ).ToList();
            myNum =   modegroup.ToArray();
            var   medgroup  =listsort.Select(n =>  n.Title ).ToList();
            medarr = medgroup.ToArray();
            int size = medarr.Length;
            int mid = size/2;
            // int median = 0;
            if ((size % 2) != 0){
                val0 =  medarr[mid];
                calcmedian =  medarr[mid];
        
                
            }
            else {
                  val1 = medarr[mid - 1];
                 val2 = medarr[mid];
                 
                int val3 = val1 + val2;
                calcmedian = Decimal.Divide(val3,2);
                calcmedian = Math.Round(calcmedian, 2);
            }
         }}
}

Share via

How to add Bootstrap to .NET MAUI

3 answers

Your answer