i ma having trouble to play with boostrap 4 css.
I would like to have in a row two jumbotron with the same height no matter what is inside and with the inside of the div vertically aligned center.
my code is the following :
<div class="container">
<div class="row">
<div class="col-8">
<div class="jumbotron greenback">
<h7>Welcome to the Project test Detail page</h7>
</div>
</div>
<div class="col-4">
<div class="jumbotron greenback">
<div class="inner-score">
<div class="score-title">
<h6>Team Score</h6>
</div>
<div class="score-value">
<h4>85</h4>
</div>
</div>
</div>
</div>
</div>
</div>
I created a jsfidlle to show you https://jsfiddle.net/kscv67kt/2/
As you can see now the two jumbotron have vertical text align center but are not full row height..
Have you tried adding height: 100% to the jumbotron elements?
.jumbotron.greenback {
height: 100%;
}
This will cause both elements to fill the height of the container (the .row in this case).
Worth noting that setting height: 100% would cause the element's bottom margin to overflow it's container, so for neatness you could adjust the jumbotron's and their container's margin-bottom properties accordingly...
.container {
margin-bottom: 32px /* Moving the margin-bottom value of the
.jumbotron to it's outer container. */
}
.jumbotron.greenback {
height: 100%;
margin-bottom: 0;
}
Alternatively with jQuery...
$(document).ready(function() {
var jumboMaxHeight = 0
$(".jumbotron").each(function(){
if ($(this).height() > jumboMaxHeight) {
jumboMaxHeight = $(this).height() }
})
$(".jumbotron").height(jumboMaxHeight)
})
Edit: To centre the text elements within the .jumbotron, there are a number of ways you could do it, one is using flexbox properties on the parent element (in conjunction with the jQuery solution)...
.jumbotron.greenback {
text-align: center;
display: flex;
align-items: center;
justify-content: space-around;
}
Related
In a responsive layout, I have two columns. The left column is the sidebar and the right column is the content.
Using a media query, when the screen width is tiny, the columns turn to 100% width and stack on top of each other.
In this case, I want the sidebar (the first div) to appear beneath the content (the second div).
I tried using float: right on a small screen once it's at 100%, but at 100% width, the float apparently doesn't matter.
.left, .right {
width: 100%;
float: left;
background: green;
}
.left {
float: right;
background: red;
}
.half {
width: 50%;
}
.space {
width: 100%;
display: block;
height: 40px;
}
And on the page:
<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>
<div class="space"></div>
<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>
Here is the fiddle: https://jsfiddle.net/ph09frvw/
I'm sure this is not the first time someone wanted to wrap the sidebar under the content, I just haven't been able to find a solution.
You can use display: flex and use the order property to change the order of the <div> elements. While floating can be helpful for horizontal alignment, it will be of little help for vertical alignment, Here is an example:
.flex {
display: flex;
flex-flow: row wrap;
}
.left {
order: 2;
flex: 1 0 50%;
background: red;
}
.right {
order: 1;
flex: 1 0 50%;
background: green;
}
.full {
margin-top: 20px;
}
.full > .left,
.full > .right {
flex: 1 0 100%;
}
<div class="flex">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="flex full">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
You could use the display:flex; property combined with flex-direction to reorder your divs. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/
Remember to reference your related class-names in your HTML elements' class attribute.
Your CSS display:block should do the trick, else try something like:
float: left
When you use: display:block on a div element, you do not need to specify width:100% as it should automatically span across the width if it is not hindered by anything else.
Make sure the position of these elements are "relative", else it may not work as expected; it may be stated globally that some specific tags should be displayed "absolute" and that may break what you're trying to achieve.
I would like to vertical align my jumbotron on the screen when the user navigates to it no matter what the screen size, I would then like to be able to scroll down and it not move with the screen
I would like to use inline styles if possible
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>
You can do this without jQuery. First put the jumbotron in a wrapper:
<div class="wrapper">
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>
</div>
Then make the wrapper the full height of the viewport using vh units:
.wrapper {
position: relative;
height: 100vh;
}
Finally, use absolute positioning and transforms to center the jumbotron:
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can make the jumbotron and height and width you want, and it will always be centered in the container. All of these styles could be inline, just move them to style attributes on their respective DIVs. The values never need to change.
I solved this issue using CSS Flexbox. No Javascript or jQuery.
Here's my code, I added the class vertical-center and then in the CSS file -
.vertical-center {
min-height: 100%;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can see an example of this at - http://codepen.io/jjmax/full/avdVBE
You could use jQuery for this which, incidentally, creates inline CSS.
Your HTML plus a containing div:
<div class="wrapper">
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>
</div>
A jQuery function:
function myJumbotron() {
var winHeight = $(window).height();
// make wrapper div whole height of window
$('.wrapper').css({
height: winHeight
});
// make jumbotron be in the middle vertically
$('.jumbotron').css({
marginTop: (winHeight / 2) + 'px'
});
}
Call function on document ready:
$(document).ready(function() {
myJumbotron();
});
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
I have two div tags:
<div id="parent">
<div id="content">
//content
</div>
</div>
the content of the <div id="content"> is added dynamically so I don't know its width and I can't set width and margin to it.
How can I center align <div id="parent"> content?
PS: I don't want to use javascript to do this.
Try this:
#parent {
text-align: center;
}
#content {
display: inline-block;
}
You can use text-align property.
#parent {
text-align: center;
}
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>