CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2989367
user2989367

Reputation: 435

How to make a smaller container in bootstrap

Im making a login page using Bootstrap that is nested in a container

I know that the way that bootstrap works is with a grid system based on the width of the device you are using to view it on so for example if Im viewing the page on my Iphone it will look fine because the width of my phone is small enough so that the container is of manageable size.

However if I view the page on either a desktop or an ipad, the width of the container looks ridiculous because the Input fields take the width of nearly the entire page.

So my question is how could I set a width to my container (or the panel that contains the login form) without messing with the way it looks on the mobile version right now which is perfect. I know that by setting a manual width to it doesnt work because it also sets the width on the mobile device. Is there a simple way to do this that I just havent seen in the documentation?

Upvotes: 12

Views: 32840

Answers (2)

Pooja Jhadhav
Pooja Jhadhav

Reputation: 49

This is a code for a small middle container which would look something like this

Here is the code

.small-middle-container{
	margin: auto;
	width: 40%;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Student Managment</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<div class="small-middle-container">
			<div class="row">
				<a href="index.html">
					<button class="pull-right btn btn-success col-md-2" style="margin-top: 1em;">
					Add
					</button>
				</a>
			</div>
			<div class="form-group">
				<form>
					<div class="form-group row" id="modalElement" style="margin-top: 2em;">
						<label for="SubjectId" class="col-sm-2 col-form-label">Subject Id</label>
						<div class="col-sm-10">
							<input type="number" class="form-control" placeholder="Subject Id" required>
						</div>
					</div>
					<div class="form-group row" id="modalElement" style="margin-top: 2em;">
						<label for="SubjectName" class="col-sm-2 col-form-label">Subject Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" placeholder="Subject Name" required>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>

Upvotes: 4

DarkteK
DarkteK

Reputation: 881

This might help you:

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    } 
} 
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    } 
} 
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    } 
}

.container-small, .container-large {
    max-width: 100%;
}

Then you can use the classes: container-small and container-large alongside the container class, like so <div class="container container-small">

Upvotes: 16

Related Questions