How to create a bootstrap modal dialog?

HTML code    

My binary world

I am a coder and so I view this world in binary....

Zeros and Ones. Good and Bad. Heroes and Villains. Black and White.

So how the heck am I supposed to create a green button? :)

Iframe's are useful when your code takes a while to load.

I was reading a CSV file and converting it to a HTML table to display it. However, since the file was large, it was taking a while for the code to execute and the page to be rendered. Hence, I shifted the table to an iframe and the code to the corresponding page. Now the rest of the page loads fast, and only the iframe still takes three to four more seconds to load. I can handle this even better if I can show the user an image which signifies that the iframe is loading. But I don't really need that right now. And fyi, StringBuilder helped reduce the execution time by a lot!

Sample code behind the iframe page:

//Note that FileContents is a literal control on the page.


  string folderPath;
    protected void Page_Load(object sender, EventArgs e)
    {
        folderPath = @"../Something/SomeFolder/";

        PrintFile();
    }

    private void PrintFile()
    {
        Directory.CreateDirectory(folderPath);

        DirectoryInfo d = new DirectoryInfo(folderPath);
        FileInfo[] Files = d.GetFiles("*.csv");
        foreach (FileInfo file in Files)
        {
            PrintContents(file.Name);
        }

    }

    private void PrintContents(string name)
    {
        string path = folderPath + name;
        FileContents.Text = "";
        StringBuilder htmlOutput = new StringBuilder();
        using (StreamReader readFile = new StreamReader(path))
        {
            string line;
            string[] row;
            line = readFile.ReadLine();
            string[] rowHeaders = line.Split(',');

            htmlOutput.Append("<table border='1'><tr>");
         
            foreach (string s in rowHeaders)
            {
                htmlOutput.Append("<th>" + s + "</th>");
               
            }
            htmlOutput.Append("</tr>");

            while ((line = readFile.ReadLine()) != null)
            {
                row = line.Split(',');
                if (row.Length > 1)
                {
                   
                    htmlOutput.Append("<tr>");
                    foreach (string s in row)
                    {
                        htmlOutput.Append("<td>" + s + "</td>");
                       
                    }
                    
                    htmlOutput.Append("</tr>");
                }
            }
            htmlOutput.Append("</table>");
           
        }

     


        FileContents.Text = htmlOutput.ToString();

    }


RESULT:

Code using Bootstrap to wrap text around a embedded video:







<div class="widget-content">
<h1 class="page-title">Welcome!</h1>
<div class="separator-2"></div>


<div class="row">
<div class="col-md-12">
                               
                                        <div class="pull-right" style="position:relative;padding-bottom:2%; padding-left:2%">

<div class="embed-responsive embed-responsive-16by9">
                                            <iframe width="420" height="315" src="https://www.youtube.com/embed/R-TBYP0xZCw" frameborder="0" allowfullscreen></iframe>

</div>
                                    </div>

                          
Blah blah blah blah.







</div>
</div>

In HTML, the table styles cellpadding and cellspacing can be set How would this be accomplished using CSS?

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE <= 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Credits: Eric Nguyen