I want my sign in box to only fill 8 of the columns that bootstrap provides. Currecntly this is what I have written for the div:
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">
However this is the current result I'm getting...
Any Ideas?
There is no col-xs-8 class in bootstrap 4.1. this is new class in bootstrap 4.1 for small devices col-8. Try This
<div class="row">
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-8 tile">
</div>
</div>
You have to put inside the container and then make the offset
<div class="col-md-8 offset-md-2">
Note: I'm not sure whether this will answer your question or not 'cause you didn't provide the question clearly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<label>Email</label><br>
<input type="email" class="form-control">
<label>Password</label><br>
<input type="password" class="form-control">
<br>
<button type="submit" class="btn btn-outline-primary btn-sm">Login</button>
</div>
</div>
</div>
You have to put inside the container and then make the offset of xs class like this
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 col-xs-offset-2 tile">
You need to Wrap it into a Row.
<div class="row">
<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">
....Your Input stuff etc...
</div>
</div>
You probably also want justify-content-center so your content (input) is in the center of
the page.
More Infos
Related
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
I have this simple code:
<div class="container branduri justify-content-center">
<div class="row justify-content-center">
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
The issue is that on my website, as you can see in attached photo, the columns it is not centered perfectly. Why?
Thanks a lot.
Add bootstrap class text-center on your row div
class="row justify-content-center text-center"
You just need to center the text within each column by adding this property to the row text-align:center; or adding the Bootstrap class text-center as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container branduri justify-content-center">
<div class="row justify-content-center text-center">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
</div>
</div>
I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset?
This is my code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
Use ml-auto instead of offset-md-1 it works perfect for you.
try this code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
I hope this will works perfect for you.
Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.
Thank you...
There is no *-xs-* classes in bootstrap-4. Use col-12 instead.
`col-xs-*` not working in Bootstrap 4
Ther are three ways to add space between columns.
margin-x on .col-*
padding-x on .col-*
justify-content-between on .row
Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.
The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.
offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
offset-md-1
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 mr-auto bg-primary">
mr-auto
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
ml-auto
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
justify-content-between
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
justify-content-between
</div>
</div>
</div>
If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.
#media (min-width: 768px) {
.ml-md-0_5 {
margin-left: calc((100% / 12) / 2)
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
ml-md-0_5
</div>
</div>
</div>
Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.
As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.
In the following code I wish to display to containers side by side in mobile like so:
However the output I am receiving is both containers stacked on top of each other:
Despite having col-sm-6 as the div class that wraps each container. Below is my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="text-center mx-auto our-scope-card mb-5">
<div class="col mt-5 mb-3">
<h1>CSS Align</h1>
</div>
<div class="row pt-4 justify-content-center">
<div class="col col-lg-8 col-10">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-4 col-md-6 col-12 pb-5 pt-5">
<div class="mb-5 mt-3">
<img src="http://via.placeholder.com/140x100" alt="Dev" />
</div>
<p class="font-weight-bold">Application development</p>
<p>For businesses of all sizes and industries, we can custom design an application to fit your needs.</p>
</div>
<div class="col-xs-6 col-sm-6 col-lg-4 col-md-6 col-12 pb-5 pt-5">
<div class="mb-5">
<img src="http://via.placeholder.com/140x100" alt="Mobile Apps" />
</div>
<p class="font-weight-bold">
Mobile applications
</p>
<p>Whether iOS or Android, we focus on including features that will bring you ROI and differentiate your platform.
</p>
</div>
</div>
</div>
</div>
</div>
Any advice on how to achieve my objective?
You need col-xs-6 class for mobiles screen sizes.
Extra small devices
Phones (<768px)
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example