I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.
I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.
The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.
My HTML:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel">
Some content
</div>
</div>
<div class="col-md-2">
<img src="images/myimage.png" class="img-responsive center-block">
</div>
<div class="col-md-5">
<div class="panel>
Some content
</div>
</div>
</div>
</div>
</div>
Here's an option using transform:
html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */
http://www.bootply.com/YG8vpg1rIf
You can overcome the vertical align problem by using css Flexbox.
Add the class "vertical_center" to the parent div.
Then add the following css
.vertical_center {
display: flex;
align-items: center;
}
Hope this will solve your problem.
Use following CSS property for making the image vertically centered
img { vertical-align: middle; }
For horizontal alignment use class name text-center of bootstrap along with the other class name of your div if yu have. Like,
<div class="col-md-2 text-center"> ... </div>.
It will make the content of the div horizontally centered.
Related
I have 2 divs on a same row. When the div2 which is on right is removed I want the div1 on left to take full width.
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">Div1/div>
<div class="col-sm-6" style="background-color:lavenderblush;">Div2</div>
</div>
I am using bootstrap for grid and resposivity. Is there any way I could achieve it with bootstrap?
You could write a css selector that sets the width of col-sm-6 to be 100% it is both the first-child and last-child
.row .col-sm-6:first-child:last-child {
width:100%
}
If you are using bootstrap4, then you can skip the column size declaration and instead just do.
<div class="row">
<div class="col-sm" style="background-color:lavender;">Div1/div>
<div class="col-sm" style="background-color:lavenderblush;">Div2</div>
</div>
How do you change the order of html elements based on the size of the screen?
For example, on large screen like desktops, the order would be like this:
element1 element2 element3
However, when seeing this on phone, it wouldn't fit the width of the screen. So, I would like it to look like this:
element2
element1
element3
Since Div2 is the main div, I would like it to be on the middle on large screens and on top on smartphone screens.
I am using Foundation as the framework for the website.
Here's an example code:
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
</div>
<div id="element2" class="column column-block">
</div>
<div id="element3" class="column column-block">
</div>
</div>
I have spent a lot of time learning html and css so that's all I really know to make a website. I have been planning to learn javascript so it would be fine if the solution requires it.
Here's the CSS way, using flexbox (take a look at this guide to help you get started with flexbox):
flex-direction is either row or column (depending on how you want your elements to flow)
Change their order with order (using order: 1 on #element2 will put it at the end)
#container {
display: flex;
flex-direction: column;
}
#element2 {
order: -1;
}
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
Here's one way you could do it:
In CSS you can use a media query to display or hide content:
#media (max-width:632px){
#computer{
display: none;
}
#phone{
display: block;
}
}
You can then have 2 x html sections for both computers / smartphones for example (If you'd like to have big differences in structure etc. between devices)
Good read on media queries - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
You just simply use class medium-up-12 instead of class on container ID.
Goo Luck.
<div id="container" class="row medium-up-12">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
I know div elements are block level elements. They come one by one in different rows. I found one strange behavior. It is not displaying one by one.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
I added two div elements after completing the serach-box div. I gave serach-box a position: absolute; and its parent div position: relative;.
But why did div text appear above ? Why not below the serach-box div?
Code is below:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
Because the search box is absolutely positioned, it is taken out of normal flow.
Since it isn't in normal flow, it has no influence over the height of its container.
Since its container has no other content, the container ends up with a height of zero.
The elements following the container are, therefore, not pushed down by the container's height.
your position absolute will cause the text to find its way to the top.
Absolute means it will 'hover' on top of the page.
you can set the position to relative and add some with and height to place the box at the top.
just replace absolute for relative
To the div which is relatively positioned, its taking no height so, both the div's with 'hello' text are displaying there itself.
Give some min-height to the relatively positioned div.
<div style='position:relative;min-height: 32%'>
....
....
</div>
Which will work fine for you.
I am trying to accomplish exactly something like this:
http://www.freshbooks.com/
I have a container with a background and a form inside it. I want this container to resize exactly to the width and the height of the window it is opened in. Also, when resizing, it should resize along the window.
I drew it so I can be more clear. This is how I want it to look like:
Instead, at the moment it looks like:
I know how to do this with jQuery, it's pretty simple, but if I set a fixed height to the container, the "responsiveness" of bootstrap and of the page is completely lost when I shrink it to a smaller size.
I am pretty sure that bootstrap has some build in and ready to use functionality for doing this, but obviously I can't find it.
Also, I am having trouble to center the "Some text and form" components vertically in the gray area.
Your help is appreciated!
There should be no need for jQuery or JavaScript. This can be done using only CSS.
You can use .container-fluid instead of .container to have it span almost the entire width of the window. The columns inside it will have a small gutter of 15px to the left and right though. But as you'll likely add the background-color on the .container-fluid this shouldn't be a problem.
Put all content that should take up the entire height of the window inside the .container-fluid and add a height property to it. Either 100vh, 100% of the view height. If that doesn't work due to browser support (e.g. you need to support IE8) give it a height of 100% and make sure that all its parents (at least html and body) also get a height: 100%.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid height-full bg-dark">
<div class="row">
<div class="col-xs-12">
<h1>Full width and height</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
If it's only about showing a small form horizontally and vertically centered in the entire width and height of the screen, I suggest not using the .container-fluid but the regular .container. From your screenshots it seems that you don't want the form to take up the entire width of the screen. Surround the .container with a div that has its background-color set.
Create a Bootstrap grid that contains the form (in my example I've used .col-xs-6.col-xs-offset-3 to have a half width column in the center of the screen. Give this column the height: 100vh to make it take up the entire height of the screen. The horizontal centering is now done.
Vertical centering is done by positioning the form absolutely, pushing it down top: 50% of the height of its container (the column has position: relative) and pulling it transform: translateY(-50%) of its own height up. See css-tricks.com/centering-css-complete-guide/ for more information
The 100vh might conflict with your navbar. Take it outside of the regular document flow by either make it fixed by adding .navbar-fixed-top or position it absolutely.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
.vertically-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-dark">
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 height-full">
<form class="vertically-center">
<h1 class="text-center">Some text</h1>
<div class="row">
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
I'm new to jQuery. I'm using Accordion. When I click on the accordion it overlaps on the footer. How can I avoid it
Below is the code for the footer -
<footer>
<div class="row footer_class">
<div class="container">
<div class="col-lg-8 font_color">Copyright © 2013</div>
<div class="col-lg-2 pull-right font_color">Powered by Test</div>
</div>
</div>
</footer>
Below is the picture of how accordion overlaps the footer.
I don't want it to overlap the footer but the footer should move down below the accordion when the collapsible menu is opened.
Below is the CSS for the footer -
.row_color{
border:2px solid #A40F17;
margin:0px;
}
.footer_class{
background-color:#A40F17;
height:40px;
color:#fff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position : relative;
}
But still the footer overlaps over accordion
You could try the CSS code clear: both either on the footer or the div that wraps your accordion.
Surprised at the lack of answers to this question around stackoverflow. Anyone who finds themself in a similar situation, or has a better solution, please see answer here Collapsible javascript element overlapping footer (not accordion)