Recently, I delved into the world of bootstrap and encountered some trouble setting my width to 100%. Despite trying to assign width:100%; in my container CSS, it didn't seem to work. The only workaround I found was using container-fluid no-padding in my div class (which did work), but I learned that this approach is not recommended as it goes against Bootstrap's default 15px padding. What is the proper method for achieving a width of 100% in Bootstrap? Thank you in advance.
Here is the HTML code snippet:
.con-1{
border: 1px solid green;
height: 100%;
position: absolute;
left: 0%;
}
.row-1{
border: 3px solid red;
background-color: white;
height: 75%;
}
.row-2{
border: 3px solid red;
background-color: white;
height: 25%;
}
.col-1{
border: 3px dotted blue;
width: 95%;
}
.col-2{
border: 3px dotted blue;
width: 5%;
}
.col-3{
border: 3px dotted blue;
width: 31.6%;
}
.col-4{
border: 3px dotted blue;
width: 31.6%;
}
.col-5{
border: 3px dotted blue;
width: 31.6%;
}
.col-6{
border: 3px dotted blue;
width: 5%;
}<div class="container con-1">
<div class ="row row-1">
<div class="col-lg-11 col-md-11 col-1">
Row 1 Col 1
</div>
<div class="col-lg-1 col-md-1 col-2">
Row 1 Col 2
</div>
</div>
<div class ="row row-2">
<div class="col col-3">
Row 2 Col 1
</div>
<div class="col col-4">
Row 2 Col 2
</div>
<div class="col col-5">
Row 2 Col 3
</div>
<div class="col col-6">
Row 2 Col 4
</div>
</div>
</div>