I recently started using Bootstrap. I'm having a problem with centering Jumbotron. I can't post image as example now because I need 10 reputation. My code:
<div class="container">
<div class="col-md-8 jumbotron center">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
</div>
My css:
.jumbotron {
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
.center{
text-align: center;
}
I'm sorry if solution is very easy but I'm beginner web developer.
You've set the size of your jumbotron to 8 columns on 'medium' and above (col-md-8) with no offsetting. This means as the screen gets bigger than what Bootstrap classes as 'Medium' it will change from 100% with to 8/12s width.
If you want this width then add an offset class of 2 (col-md-offset-2) or you can get rid of your col-md-8 to force it to always be 100% regardless of device width as in this example - http://jsfiddle.net/g8LUy/1/
Full width jumbtron
<div class="container">
<div class="jumbotron center">
...your jumbtron html
</div>
</div>
'8/12ths' width jumbotron
<div class="container">
<div class="jumbotron col-md-8 col-md-offset-2 center">
...your jumbtron html
</div>
</div>
You can read more on the Bootstrap grid system and the various offsetting classes on their website on their 'CSS' page under 'Grid system' - http://getbootstrap.com/css/#grid
Related
I am trying to create a website template and I have 3 divs that I have sized equally and when I edit it on codepen using my laptop, it looks perfectly centered, but when I use my monitor( which is a much larger screen) the divs all shift to one side. How do I make my divs responsive to a change in screen widths. In this case, I want my divs to all come together in the middle of the page if the screen is wide, but if it is a laptop screen I want the div's to fill the space.
Here is a codepen to show you what it looks like now: https://codepen.io/chenius/pen/eKvRKp/
snippet of code for one of the divs:
.post1{
position: absolute;
width: 392px;
height: 500px;
background-color: #F1F0F0;
margin-top: 50px;
margin-left: 40px;
}
If you add a codepen try to include your problem only. I've update your codepen.
If you try to make a responsive design don't use px as a size. If you try to style all blocks with position absolute you don't have controll in your CSS.
Try using display: flex combined with a % width and maybe a max-width depending on your style preferences
#bodyposts {
background-color: white;
width: 100%;
display: flex;
justify-content: center;
/*border: 1px solid black;*/
}
.post {
width: calc(100% / 3);
max-width: 368px;
}
<div id="bodyposts">
<div class="post1 post">
<img src="https://photos-5.dropbox.com/t/2/AACOIvsj9S-Od_SOp3CrZNZD9a2-vgB9txeSuP95IDvWhA/12/731836158/jpeg/32x32/1/_/1/2/1-1.jpg/ELC5uLQIGA4gBygH/CN4xmVMBYozkdoVkY_yXluv4Yao68hgbv0V95K7Tjy4?size=2048x1536&size_mode=3" id="post1img"/>
<p class="text-success">Bootstrap V3.3.6</p>
<p id="post1para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
<div class="text-center"><button type="button" class="btn btn-success">Button Green</button></div>
</div>
<div id="post2" class="post">
<img src="https://photos-3.dropbox.com/t/2/AAA0wm6tg1X1K7zHZG5l6nZGnfHWobZLJTB4L12PBjLRhQ/12/731836158/jpeg/32x32/1/_/1/2/1-2.jpg/ELC5uLQIGA8gBygH/simGKuHsNbmiQz63msz6lnpI4VntyYBKZScXTOh08PY?size=1280x960&size_mode=3" id="post2img"/><h3 class="text-primary">Responsive Desgn</h3>
<p id="post2para">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by Unsplash. Thank you for visiting our website. Please come again!</p>
<button type="button" class="btn btn-primary">Button Blue</button>
</div>
<div id="post3" class="post">
<img src="https://photos-2.dropbox.com/t/2/AABT_1USaAxiBj120M9ai5jS-hYbSHGkRn0yDJhQeC4rNg/12/731836158/jpeg/32x32/1/_/1/2/1-3.jpg/ELC5uLQIGA8gBygH/APtdBotAnn4vJycbaWyxY84b1TmaxKy3x2JChb8NLOE?size=1280x960&size_mode=3" id="post3img"><h3 id="post3h3">Parallax Scroll</h3>
<p id="post3para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
<button type="button" class="btn btn-secondary">See Details </button>
</div>
</div>
This will position the blocks according to your preferences. You can update this on your original file. See how I also add a className to your div so you can style way faster.
I see that you're using some Bootstrap classes. Would it be easier to use the Bootstrap grid to make it easier? Maybe try using the class of col-sm-4 for 3 columns to make it responsive. If not Bootstrap, I use 3 divs and float them to the left with a width of 33.3% or 33% if you want spacing then use a media query to break it into a 50% div and then a 100%.
Also I would try to target the same class to prevent writing repetitive CSS for those columns
You could try the Responsive Web Design Grid , similar to #Trace751 suggestion of Bootstrap.
I want to display the text (and if the image is smaller, then the image) in the middle by vertically. But i can't accomplish it. Any help?
Here is what i have right now: Jsfiddle
HTML:
<div class="container overview-sm">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
</div>
</div>
CSS:
.box2 {
margin: 5px 5px 5px 0;
text-align: center;
display: inline-block;
width: 100%;
}
.image{
width: 100%;
max-width: 450px;
}
.row{
padding-bottom: 30px;
}
Image of what i want it to be: Image
The easiest way to do this would be to use Flexbox. Note that older browsers may not have great/any Flexbox support: https://caniuse.com/#search=flexbox)
If you are using Bootstrap 4, its grid uses Flexbox, so the columns in the row should already match each other's height. You can then use Bootstrap 4's Flexbox utility classes to vertically center the column's content: class="d-flex align-items-center". Ex:
<div class="row">
<div class="col d-flex align-items-center">Centered Content</div>
<div class="col">
<ul>
<li>Longer</li>
<li>Multi</li>
<li>Line</li>
<li>Content</li>
</ul>
</div>
</div>
Codepen
If you are using Bootstrap 3, you're going to have to add the appropriate flexbox code to both get your columns to match in height and vertically center your content. Here is a little cheatsheet I find helpful for building out flexbox layouts: http://jonibologna.com/flexbox-cheatsheet/
Edit: Here is the same example with Bootstrap 3:
HTML:
<div class="row row-flex">
<div class="col-md-6 col-v-centered">Centered Content</div>
<div class="col-md-6">
<ul>
<li>Longer</li>
<li>Multi</li>
<li>Line</li>
<li>Content</li>
</ul>
</div>
</div>
CSS:
.row-flex {
display: flex;
}
.col-v-centered {
display: flex;
align-items: center;
}
Codepen
If you want the text to be displayed underneath the second row then you will need to create another image div and add a class so it only displays on mobiles.
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 visible-xs ">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 hidden-xs ">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
https://jsfiddle.net/7goLo3xy/2/
If you need more control than CSS provides you can use a simple jQuery or JavaScript implementable.
$(window).resize(function() {//on resize
setBoxSizes();
});
function setBoxSizes() {
$('.image').each(function() {
let $imageBox = $(this).closest('.box2');
let imageBoxTop = $imageBox.offset().top;
let $otherBoxes = $imageBox.closest('.row').find('.box2');
$otherBoxes.each(function(){
$box = $(this);
if(!$box.find('.image').length) {//doesn't contain .image
if(Math.abs($box.offset().top - imageBoxTop) < 3) {//on the same layout row
$box.height($imageBox.height());
}
else $box.css('height', 'auto');//restores single column layout
}
});
});
}
setBoxSizes();//initial configuration
Fiddle Example! - Handles multiple column layout, changing columns layouts, and ensures centering is performed against equal horizon boxes.
If you don't want to use Flexbox you could always just set a height of 350px and use table and table-cell with vertical-align set to middle.
However this method does restrict you to having a fixed height so, if the height of your image changes the box height won't be relative. If you want the box to relative you could always set a height of 0 and use padding-bottom. More on this here
<div class="box2">
<div class="center">
<div class="center-v">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
</div>
.center {
display: table;
height: 345px;
}
.center-v {
display: table-cell;
vertical-align: middle;
}
Creating a custom WordPress theme with Bootstrap3.
My divs are behaving ridiculous, as I probably missed something. I tried various solutions like display: inline, vertical-align: top, floats and clears, etc... But nothing worked.
Here is my current look, and everything should be inline:
here is my current code:
<div class="container content">
<!-- CONTENT -->
<div class="col-md-12 blog-posts">
<article class="single-article col-md-4">
<a href="myweb.com/blog/tempus-non-auctor/">
<img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<h1 class="article-headline">tempus non, auctor</h1>
<h4 class="article-time-stamp"><i>Posted on July 15th, 2016</i></h4>
<p></p><p>Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.<br><a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"><i>Read more</i></a></p>
<p></p> </article>
</div> <!-- end blog posts part -->
<!--END content wrapper -->
</div>
and css:
.single-article {
padding-bottom: 10%;
em {
font-style: italic;
}
}
.article-headline {
padding-bottom: 2%;
a {
color: $purple-color;
}
}
.article-time-stamp {
font-size: 1em;
padding-bottom: 1%;
}
Any advices? Thanks
You have col-md-4 nested right under col-md-12. You can't nest columns like that. You need a row in between. That is improper Bootstrap.
<div class="row">
<div class"col-md-12">
<div class="row">
<div class="col-md-4">
<p>Blah Blah</p>
</div>
<div class="col-md-4">
<p>Blah Blah</p>
</div>
<div class="col-md-4">
<p>Blah Blah</p>
</div>
</div>
</div>
</div>
If you are using inline-block, make sure that you have this CSS declaration:
vertical-align: top
This way everything gets aligned at the top of the div. You can always use margins or padding to push things down if you need to.
Hope this fixes what you need!
sometimes the easiest solution is the most logical one.
I've found out that I had a <br> tag under each article and this was causing that each article is being pushed down.
I am trying to create a bootstrap site and what I need to happen is to have the content drop below a hero image I have if the screen gets to small. The hero image is just a DIV I've created that used the cover for the background. I've tried setting my columns to 12 for the smallest screen size, but it still just pushes it on top of my hero image. How do I get my content to push down below the image?
Example: http://www.bootply.com/aF7D9RDMqr
<div class="fill-screen container-fluid" style="height: 400px;">
<div class="row">
<div class="col-xs-12 col-sm-1 col-sm-offset-2" style="margin-top: 30px;"><img alt="Logo" src="http://placehold.it/184x18"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-offset-2">
<h1>A new movement</h1><button class="btn btn-default" type="button">Default</button> <button class="btn btn-default" type="button">Default</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula condimentum purus. Nunc vehicula lorem lacinia efficitur commodo. Aliquam tempor elit eget dui faucibus, non euismod metus rhoncus. In sed ipsum id dolor tincidunt euismod. Ut sit amet ex at tortor molestie malesuada.</p>
</div>
</div>
</div>
How I'd like it to look:
I upgraded your code here : codepen
What I needed to do is put the background in a div with no children, and place the container in absolute position to put it on the background, and then relative position for little screens. If you are using Bootstrap alpha 4, you can do it even more easily using mixins.
.container-fluid {
position: absolute;
top: 0;
}
#media only screen and (max-width : 767px) {
.container-fluid {
position: relative;
}
}
i'm new to coding, but i'm trying hard. There's a thing i still fully don't understand. Div inside a div/image scaling and positioning with bootstrap. I'm trying to make a responsive website and need some help with the layout.
Here's the HTML code i have:
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="col-md-8">
<div id="image_div">
<div ><img src="http://placehold.it/120x100"/></div>
</div>
<div id="text_div">
<div id="heading_text">
Heading 1
</div>
<div id="text" class="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.
</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">
Right bar
</div><!-- Soninio widgeto pabaiga -->
</div>
Here's an image
As the website scales down i want the image and the orange div to scale down too.
fiddle link
Explanation
The key to make the image scale is to set the width of it to 100%, as I did under #image_div img. This way it will take on the width of it's parent container.
Then you just have to make sure the parent container is fluid. In my example I made it 80%. This way it will always be 80% of the browser width, or the parent width - depending if it's wrapperd in another div.
When the 80% container scales because the img is set to 100% it will always occupy 100% of the 80% container.
Hope that help clear things up.
Additional Resources
If you're interested in learning more about responsive this book won't disappoint. Super quick read and it'll answer all of your questions on responsive:
http://www.abookapart.com/products/responsive-web-design
The Example Code + JSFiddle
Here's an example of what you're looking for: http://jsfiddle.net/f25xM/1/
HTML
<div class="cf wrapper">
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="cf col-md-8">
<div id="image_div">
<img src="***" />
</div>
<div id="text_div">
<div id="heading_text">Heading 1</div>
<div id="text" class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">Right bar</div>
<!-- Soninio widgeto pabaiga -->
</div>
CSS
body {
margin:0;
padding:0;
}
.wrapper {
background:red
}
.container {
background:red;
width:80%;
}
#left_bar, #right_bar {
float:left;
}
#left_bar {
background:green;
}
#right_bar {
background:purple;
width:20%;
}
#image_div, #text_div {
float:left;
}
#image_div {
background:orange;
width:20%;
}
#image_div img {
width:100%;
}
#text_div {
background:yellow;
width:80%;
}
/* Clearfix */
.cf:before, .cf:after {
content:" ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
I'm not sure why you have a div inside of "image_div" but you can just set the width of the image to 100%. and that way when the container div resizes, the image will also resize. Not sure if that makes sense, its hard to help you without some of your css or a fiddle or codepen.
In Bootstrap3 you can just add class="img-responsive" to make it 100% of the parent element.