CODEWITHSUNDEEP
csstwitter-bootstrap
Mikkel
Mikkel

Reputation: 1811

How to make bootstrap row "col-md-4" fullscreen size

I'm using the bootstrap grid system, but can't seem to make the rows full-screen size. Right now i'm getting something like this:

|    | col-md4 | | col-md4 | | col-md4 |    |
|                                           |
|                                           |
|                                           |

I want it too take all the space of the screen like this, so there is not white space in the left and right side.

|      col-md4 | | col-md4 | | col-md4      |
|                                           |

Have read something that it is because it's inside an container, but when i remove that, it is just the same. I'm using the bootstrap.css file and my own site.css file.

Code:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <img src="images/spise.png" />
            <br />
            Some text here
        </div>

        <div class="col-lg-4">
            <img src="images/tid.png" />
            <br />
            Some text here
        </div>

        <div class="col-lg-4">
            <img src="images/tv.png" />
            <br />
            Some text here
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
        </div>
    </div>
</div>
</asp:Content>

CSS:

.col-lg-4 {
    height: 200px;
    color: white;
    text-align: center;
    vertical-align: middle;   
    background-color: #3498db;
}

Also, i'm trying to make the text and icon the my col-md-4 div class too auto it self in the middle. But this does also not work properly.

UPDATED

Here is a picture of how it looks like:

enter image description here

Here you can see that it is not fullsize compared to my bootstrap carousel.

UPDATED 2: (Masterpage code)

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Mandersen_Hotels.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><%: Page.Title %> - My ASP.NET Application</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="Content/bootstrap.css" rel="stylesheet" />
 <link href="Content/Site.css" rel="stylesheet" />  

<script src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/bootstrap.min.js"></script>

<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" runat="server" href="~/default.aspx">M-Hotels&nbsp;
                <div class="IconFront">
                    <asp:Image class="img1" ID="Image1" runat="server" Height="28px" ImageUrl="Icon.png" Width="30px" ImageAlign="Right" />
                </div>
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/default.aspx">Home</a></li>
                    <li><a runat="server" href="~/Booking.aspx">Booking</a></li>
                    <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                    <li><a runat="server" href="~/User.aspx">User</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Registration.aspx">Register</a></li>
                            <li><a runat="server" href="~/Login.aspx">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a runat="server" href="~/User.aspx" title="Manage your account">Hello,!</a>
                            </li>
                            <li>
                                <a runat="server" href="~/default.aspx" title="Log out"></a>
                            </li>
                        </ul>
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>
    <div class="container body-content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <hr />
        <footer>
            <p>&copy; <%: DateTime.Now.Year %> - M-Hotels A/S</p>
        </footer>
    </div>
</form>
</body>
</html>

Upvotes: 2

Views: 4070

Answers (2)

jhinzmann
jhinzmann

Reputation: 988

I guess the .container-fluid is the part with the blue background. This element is not the problem. The whitespace is caused by the container body-content in your masterpage. Try removing this div or at least the container class.

For future problems of this kind, please try to use the devtools of your browser (Chrome, Firefox, IE)

Upvotes: 2

AngularJR
AngularJR

Reputation: 2762

Mikkel, Hi there, try using text-centerclass like this.

Added to this post

I have set up a Fiddle here to do what you are looking for.

I wrapped the image and text in a div and centered it both ways.

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

Upvotes: 0

Related Questions