Issue with columns going out of row


#1

Hi All,

I am trying to learn the usage of the grid system.
After going through a lot of tutorials I understand the col class of div should be used in row class which in turn should be used in container class of div. Please do let me know if my understanding till now is wrong.

Issue:

  1. column is going out of row in the left hand side & the same issue with nested columns which go out of the parent column towards the left.
  2. container is taking up the full width of the screen, even after using width:100%.

Below is the code which I am using.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<div class="container" style="text-align:center; background-color:blueviolet; color:black; width:100%">
    Container
    <br />

    <div class="row" style="text-align:center; background-color:aqua; color:black">
        Row
        <br />

        <div class="col-md-4" style="text-align:center; background-color:burlywood; color:black">
            Col 1
            <br />

            <div class="col-md-5" style="text-align:center; background-color:brown; color:black; border:dashed">
                Nested  Col 1
            </div>
            <div class="col-md-7" style="text-align:center; background-color:crimson; color:black; border:dotted">
                Nested Col 2
            </div>

        </div>
        <div class="col-md-8" style="text-align:center; background-color:chocolate; color:black">
            Col 2
        </div>
    </div>
</div>

The above code inherits from master page, please let me if you require the code of the master page also.
I have also attached the screenshot of how the webpage looks. I am using Bootstrap 3 and developing it on visual studio 2015.

Requesting guidance in solving this.
Also appreciating your precious time.

Regards
Sudhir


#2

The whole points of cols, is used them as structure, you put text in the latest col, so if you have this:

<div class="col-md-4">
  <div class="col-md-5"></div>
  <div class="col-md-7"></div>
</div>

you put the text in col-md-5 and md-7, not 4. If you want that, you are going to need to create another col:

<div class="col-md-4">
  <div class="col-md-12"></div>
  <div class="col-md-5"></div>
  <div class="col-md-7"></div>
</div>

same for row and container, i removed the text from there, and all the breaks. Oh, and if you want the container to have a width of 100%, use container-fluid. You can see all the changes i made here