I get one problem with some css and bootstrap, i still not find solution
the problem is div form content not reponsive by its parent div and always move div content outside of parent div and not adjust by parent div size when i change screen size for multiple devices.
I have one dive classs wrapper and inside it there are one nav and one div content
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar" >
</nav>
<div id="content">
<div class="row main">
<div class="col-lg-3">
</div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
</div>
<div class="col-lg-3">
</div>
</div>
</div>
in div content , there are one row , inside row , there are 3 div columns , in middle column , there one row that has problem .
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
<div class="tab_container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
</div>
</div>
</div>
its css is
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content{
width: 100%;
padding: 14px;
min-height: 100vh;
}
.tab_container{
padding:1px;
display:none;
}
form{
background-color: #ffffff;
border-radius: 10px;
}
.input-wrapper{
display: flex;
background-color: #222020;
border: 1px solid #7b7b93;
margin: 10px 0;
border-radius: 5px;
}
.prefix,
.suffix{
color: #7b7b93;
}
.prefix{
padding: 3px;
width:50px;
}
.suffix{
width:60px;
padding:2px 0px 0px 8px;
}
.css,.cdd{
padding:2px ;
color:#f5f5f8;
}
input{
background-color: transparent;
text-align: right;
color: #f5f5f8;
width:110px;
}
here is desktop screen size
here is small laptop size
div content not responsive and move outside
here is tablet view
here is mobile view
it not adjust by parent div size ...
I first think it may be bootstrap grid problem , i changed for various device columns , not ok .
may be due to form responsive problem , this form not change when screen size change .
my experience too low in frontend , please help me , How can i fix that
Try to switch up the sizing of your bootstrap columns and div classes.
For example, you have applied a 60px width to "suffix". On a smaller device that displays less pixels on the screen, it could struggle to show 60px of "suffix" content whilst also trying to display the rest of the page.
Suffix should really be set to % rather than px. You would apply px to the column itself then define how much % suffix should take up inside the column.
I'm not an expert with grids and bootstrap and run in to similar issues, but I recommend you try out Webflow - it's free to use and allows you to generate these grids yourself, responsive to all screen sizes. You can then take the code from Webflow and apply it within your own website you're having problems with.
I'm struggling to fit the background image to the parent div if the screen size getting wider.
If screen size for mobile, the result is correct what I expect. But if the screen size getting wider the background image will cut off by the parent element.
While for desktop screen, the background image will cut off by parent element:
So far my code like this:
index.html
<div id="hero">
<div className="weekend">
<h1 className="text-center">WEEKEND FROM HOME</h1>
<h6 className="text-center">Stay active with a little workout.</h6>
</div>
<div className="position-relative text-center d-flex justify-content-center">
<img src={robot} alt="" />
<button className="btn btn-light lets-go text-center">
Let's Go
</button>
</div>
</div>
style.css
#hero {
background-image: url("../../assets/shapes/bg-1.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--pinky-50);
padding-top: 134px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 23px;
}
So far my solution is adjust padding and height for different screen size but it's not best practice, because sometime i missed for several screen size.
info: resolution of background image is 1366px x 732px
I'm using bootstrap's class
<div class="btn-group btn-group-justified">
Buttons are perfect the way they are (I need them equally spaced and taking full length) but I would like a little space between them. I tried playing around with margins, width percentage and padding with no success.
Please see this codepen http://codepen.io/crhistian/pen/WwyWYM?editors=0100
HTML
<div class="panel-footer">
<div class="row">
<div class="col-xs-2">
<div class="row custom-row">
<div class="col-md-6">
<button class="btn btn-info btn-block">Cart</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-block">Checkout</button>
</div>
</div>
</div>
</div>
</div>
CSS
.custom-row {
margin-left: -5px;
margin-right: -5px;
}
.custom-row .col-md-6 {
padding-left: 5px;
padding-right: 5px;
}
For the first button in the div tag
.btn-group {
float: left;
width: 45%;
}
And for your other button (add "2" to the other buttons div tag class):
.btn-group2 {
float: right;
width: 45%;
}
Then you can add margins for the same classes if you want to position them better
I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Is there any way to center html elements vertically or horizontally inside the main parents?
Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets, like so:
class="mx-auto"
As for other users suggestion there are also native bootstrap classes available like:
class="text-center"
class="pagination-centered"
From the Bootstrap documentation:
Set an element to display: block and center via margin. Available as a mixin and class.
<div class="center-block">...</div>
If you are trying to center an image in a div, but the image won't center, this could describe your problem:
JSFiddle Demo of the problem
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
The img-responsive class adds a display:block instruction to the image tag, which stops text-align:center (text-center class) from working.
SOLUTION:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
JSFiddle demo of solution
Adding the center-block class overrides the display:block instruction put in by using the img-responsive class. Without the img-responsive class, the image would center just by adding text-center class
Also, you should know the basics of flexbox and how to use it, since Bootstrap 4 now uses it natively.
Here is an excellent, fast-paced video tutorial by Brad Schiff
Here is a great cheat sheet
In Bootstrap 4, the centering methods have changed.
Horizontal Center in Bootstrap 4
text-center is still used for display:inline elements
mx-auto replaces center-block to center display:flex children
offset-* or mx-auto can be used to center grid columns
mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Demo Bootstrap 4 Horizontal Centering
For vertical centering in BS4 see https://stackoverflow.com/a/41464397
You may directly write into your CSS file like this:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
i use this
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
for horizontaly centering you can have something like this:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
With Bootstrap 4 you can use flex-based HTML classes d-flex, justify-content-center, and align-items-center:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
Source: Bootstrap 4.1
I like this solution from a similar question:
Use bootstrap's text-center class on the actual table data <td> and table header <th> elements. So
<td class="text-center">Cell data</td> and <th class="text-center">Header cell data</th>
Bootstrap 4's use of flex properties solve this. You can use these classes:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
These classes will center your content horizontally and vertically.
I discovered in Bootstrap 4 you can do this:
center horizontal is indeed text-center class
center vertical however using bootstrap classes is adding both mb-auto mt-auto so that margin-top and margin bottom are set to auto.
for bootstrap4 vertical center of few items
d-flex for flex rules
flex-column for vertical direction on items
align-items-center for horizontal centering
justify-content-center for vertical centering
style='height: 300px;' must have for set points where center be calc or use h-100 class
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>