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?
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">
This is a code for a small middle container which would look something like
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>
Related
I'm building a chatting website and I'm trying to make the "submit message" button to be aligned above the textarea, but I ran into a weird problem. The button is aligned above it, but ( I'm guessing ) because the textarea is resizable, the button is "behind" it in a way.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
}
#submit {
position: fixed;
bottom: 20px;
right: 10px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<button type="submit" id="submit">Click to send!</button>
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</body>
In the snippet, try to minimize the textarea as much as possible; The button is right above it's minimized state. I thought about fixing it by simply adding margin-bottom to the button but I want my page to be completely responsive for all screen sizes. How could I fix this?
Thanks
Simply by reordering your markup the button is laid over the textarea. It's more semantically correct to have the button after the input anyway.
Note that I've adjusted position styles to better fit your layout. Since you're reducing the size of the textarea you need to override the width that Bootstrap provides (assuming you're using proper form element classes).
Protip: Don't ever tell your users to click somewhere. We all know how to use buttons. It's just not necessary.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
width: auto;
}
#submit {
position: fixed;
bottom: 20px;
right: 20px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" class="form-control"></textarea></p>
<button type="submit" id="submit" class="btn btn-default">Send!</button>
</div>
</div>
</div>
</body>
Try it like this, The button and the textarea end up in their own individual columns which are col-10 in width. mx-auto then centers the columns.
<div class="row">
<div class="col-sm-10 mx-auto">
<button type="submit" id="submit">Click to send!</button>
</div>
<div class="col-sm-10 mx-auto">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
</div>
</div>
</div>
Exactly as the title says, except labels are not placed fully below them. i'm just making a login page over bootstrap and it turns out labels and inputs styled with bootstrap are the source of this problem. I checked if there could be any typo or misfollowed bootstrap doc on this, but it wasn't that as far as i'm aware. I think this info is enough to come up with an answer, if not so, please let me know.
By the by, i'm using django for the backend.
NAVIGATOR: Google Chrome
GOAL: Labels are fully displayed and correctly aligned beside their respectives inputs.
RENDERED TEMPLATE IMAGE
RENDERED TEMPLATE CODE
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/accounts/css/login.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script defer="" src="/static/js/jquery.min.js"></script>
<script defer="" src="/static/js/bootstrap.js"></script>
</head>
<body cz-shortcut-listen="true">
<div class="login-area my-5 border-dark border rounded">
<div class="image-area border border-top-0">
<img src="/static/accounts/images/user.svg" alt="">
</div>
<form class="" method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="FKM9D1moYiiOXKvq1gedhgYfa6A5I5ZYQTdSOiY1uBKaHLicQAN1PXZR4GvsgdAL">
<div class="form-group row mb-3 mt-5">
<label for="#username-field" class="col-form-label col-2">Username</label>
<div class="col-10">
<input type="text" class="form-control" id="#username-field" name="username">
</div>
</div>
<div class="form-group row my-3">
<label for="#password-field" class="col-form-label col-2">Password</label>
<div class="col-10">
<input type="password" id="#password-field" class="form-control" name="password">
</div>
</div>
<div class="d-flex justify-content-center my-5 ">
<button class="btn btn-primary font-weight-bold py-2 px-4">Submit</button>
</div>
</form>
<div class="links-area my-4">
Forgot your password?
New here?
</div>
</div>
</body></html>
CSS
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, body * {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.login-area {
padding: 20px;
}
.login-area .image-area {
width: 300px;
height: 300px;
}
.login-area .image-area img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
Your labels are being clipped because you fixed their width by using col-2. Use col-auto instead so the width is determined by its content. You've also fixed the width on the input div with col-10. Change this to col to span the remaining width of the row.
<div class="form-group row mb-3 mt-5">
<label for="#username-field" class="col-auto col-form-label">Username</label>
<div class="col">
<input type="text" class="form-control" id="#username-field" name="username">
</div>
</div>
Hope this helps.
I'm trying to create a responsive header in my app with the following elements:
a logo (<img>)
a search bar (<input>)
a link (<a>)
two boxes (<div>)
Elements position depends of the screen size:
Medium screens (md-*)
Small screens (sm-*)
Extra small screens (xs-*)
I manage to create each of these layouts, but not with the responsive classes of Bootstrap... Can you help me here?
Here is the simple code I used to make this example:
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-6 col-xs-12">
<div class="input-group search-width">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<a>Launch advanced research...</a>
</div>
<!-- Nav boxes -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
JSFiddle here
I solved the issue, i found 2 problems.
The first one with your md screen, the input field and the paragraph would not stay inline, because of the float property, this would be solved by editing the css of the .input-group class as float left. The second problem for the small screen, is that the div will not stack over one other with a 100% width because you set the css property display: flex and center, I created a media query for the window size of small (<768px) to display those div as inline-block. Please comment for any additional help or problems, the code below should be working fine.
UPDATE - Solving the additional requirements for the md and sm size:
For the first problem i added padding top to the id=link, in a media query that will target only md devices, for the second problem with media queries i edited the position of those divs with position relative and left/top attributes.
Thanks
Fabrizio Bertoglio
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="input-group col-md-6">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-4" id="link">
<a>Launch advanced research...</a>
</div>
</div>
</div>
<!-- Nav buttons -->
<div class="col-md-3 col-sm-12 col-xs-12" id="boxes">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
Css Code
</body>
</html>
.vertical-aligned {
display: flex;
align-items: center;
}
.logo {
width: 100%;
display: block;
}
.nav-button {
height: 70px;
width: 80px;
border: solid 1px black;
display: inline-block;
}
.input-group {
float: left !important;
}
#media (min-width: 992px) {
#link {
padding-top: 6px;
}
}
#media (max-width: 768px) {
.vertical-aligned {
display: inline-block;
}
#boxes {
max-width: 300px;
position: relative;
left: 100%;
transform: translateX(-179px);
top: -5%;
}
a {
position: relative;
top: 49px;
}
}
I hope this answer can help you.
You can use #media to manage every element size in different layout,
for example, on laptop layout:
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
//your css here
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
//your css code here
}
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://www.youtube.com/watch?v=t526Lt_O7zo
I have these two div's:
<div class="col col-md-8">
<input id="CampaignName" type="text" class="form-control" placeholder="Campaign Name">
</div>
<div class="col col-md-2">
<button id="createCampaign" type="button" class="btn btn-default btn-sm">Create Campaign</button>
</div>
The are fine in lg, but when the screen collapses to size md or smaller, then the button is below the textbox, and they hug each other too tightly.
I'd like to add some margin between them, but NOT if the screen is lg.
You can use predefined bootstrap classes for that - just insert additional div between input and button. and make this div hidden for lg-viewport.
And you can vary its height as you wish.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col col-md-8">
<input id="CampaignName" type="text" class="form-control" placeholder="Campaign Name">
</div>
<div class="hidden-lg hidden-md" style="height: 20px;"></div>
<div class="col col-md-2">
<button id="createCampaign" type="button" class="btn btn-default btn-sm">Create Campaign</button>
</div>
You may want to:
Use media-queries to add a custom margin between the elements when the screen size is lower than 1200px and greater than 992px refer for more information: (https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system)
Example:
/* Greater than 992px, and less than 1200px */
#media (max-width:1200px) and (min-width:992px) {
#CampaignName {
margin-left: 5px;
}
}
You could use custom css and plus media queries (queries depend on the version of bootstrap you are using.)
Add a class and and specify the margin you wish to have in your css.
example
<div class="col col-md-8 with-margin-sm">
<input id="CampaignName" type="text" class="form-control" placeholder="Campaign Name">
</div>
<div class="col col-md-2 with-margin-sm">
<button id="createCampaign" type="button" class="btn btn-default btn-sm">Create Campaign</button>
</div>
And then the css
#media (min-width: #screen-sm-min) {
.with-margin-sm{
margin: 0 2px 0 2px;
}
}
If you want to follow the same sizes as Bootstrap you'd do something like this where ### is a number of pixels:
#media (max-width: ###px) {
.col {
margin: whatever;
}
}
Bootstrap's default grid (http://getbootstrap.com/css/#grid) would use 0, 768, 992, & 1200 for these sizes. So if you wanted to apply the css to JUST the md size and not bigger or smaller, you'd want 992 to 1199. Or the following:
#media (min-width: 992px) and (max-width: 1199px) {
.col {
margin: whatever;
}
}
On my page, I need to display 10 boxes across it horizontally. Each box has a min-width of 150px and a max-width of 299px. The page should fit as many boxes as it can across the page without leaving any gaps, with each box having the same width (extending a pixel if needed due to rounding).
Example: If the width of the page is 660px, 4 boxes at 165px width should be used.
If the width of the page is 600px, 4 boxes at 150px width should be used.
If the width is 597px, 3 boxes at 199px should be used, since a box cannot go under 150px.
The remaining boxes on the bottom should have the same width of the ones above.
How can I accomplish the above?
I have a fiddle here: http://jsfiddle.net/CD4f2/1/
Note how the rows of boxes leave a gap to the right.
using the follow code (because I'm forced to)
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
I've tried this with tables also but ran into the same problems, as well as many different combination of floats, and displays, and overflows.
I believe I might be able to do this by manually specifying different resolutions in the CSS. But A more automatic approach would be preferred if possible.
I only want to use javascript as a last resort. Which I should be able to do myself.
Thanks.
I have changes your .cap divs to use % widths instead of px to make it easier to get a responsive layout.
DEMO
Main CSS Change
.cap
{
background-color: red;
float: left;
height: 150px;
width: 25%;
min-width: 150px;
}
#media only screen and (max-width: 1024px) {
.cap {
width: 50%;
}
}