Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to get this to work, I found this.
Instead of 4 columns, I want to keep the same height for 3 columns. How can I do this?
This is how it looks on my frontend:
x http://imagizer.imageshack.us/v2/150x100q90/661/TS8KVU.png
And it should be at 100% of the screen side by side images.
like this? or you want the image fill the div?:
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
<div class="col-md-4 no-pad">
<img class="img-responsive" src="//placehold.it/1280x640/eee">
</div>
.no-pad{
padding-left:0px;
padding-right:0px;
height:381px;
}
.no-pad img{
width:100%;
height:100%;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I've designed the div below and I have no idea how to make it in bootstrap. I would like the div to be 10 columns wide and the images are svg images which are 64px wide and 48px tall. The text in the middle is the font Roboto from Google Fonts and is 20px in size. I would like the images and text to be vertically centered too.Image
My attempt: `
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="col-sm-1 col-sm-offset-1">
<img src="img/breath.svg" width="64" height="46.64" class="img-responsive" alt="Breath">
</div><!-- col-sm-1 -->
<p>You have taken 500000 breaths</p>
</div><!-- col-sm-10 -->
</div><!-- row -->
A better approach to this might be to use bootstraps flexbox display class d-flex. I've taken your code and put it into a codeply project. There's more information about flexbox and how to use it in the bootstrap documentation located here.
HTML with Bootstrap 4:
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<img src="http://via.placeholder.com/64x48" alt="breath">
span class="align-middle">You have taken 5000000 breaths</span>
<img src="http://via.placeholder.com/64x48" alt="breath">
</div>
</div>
CSS:
.container {
position: absolute;
top: 50%;
left: 15%;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I've got this html here:
#books {
margin-top: 4rem;
}
<div class="row">
<div class="col-lg-10 col-lg-offset-1 well">
<h1 class="text-center">Brian Jacques</h1>
<h3 class="text-center"><i>The scribe who was an abbot to all his readers</i></h3>
<figure class="figure col-lg-12">
<div class="img-thumbnail col-lg-10 col-lg-offset-1">
<img src="http://i1378.photobucket.com/albums/ah88/ejacobosaur/Brian%20Jacques%20Cartoonized_zpsz412eynr.jpg" class="img-responsive figure-img img-fluid" alt="Brian Jacques cartoon">
<figcaption class="figure-caption text-center">Jacques smiling. A radiance that shines through his books. Painted by Derek Wehrwein. </figcaption>
</div>
</figure>
<h2 class="text-center" id="books">Widely Known For
</h2>
<div class="row">
<div class="col-lg-6 text-center">
Redwall
</div>
<div class="col-lg-6 text-center">
Castaways of the Flying Dutchman
</div>
</div>
<blockquote>
<p class="text-center lead"><em>"So here is my story, may it bring<br>Some smiles and a tear or so,<br>It happened once upon a time,<br>Far away, and long ago,<br>Outside the night wind keens and wails,<br>Come listen to me, the Teller of Tales!"</em></p>
<footer class="text-center">Brian Jacques,<cite title="Lord Brocktree"> Lord Brocktree</cite></footer>
</blockquote>
</div>
</div>
The part concerning my question is the h2 tag that is directly under the closing figure tag and has the text "Widely Know For".
I've been trying to add top margin to this element (h2) but have had no success. When I opened it up in debugger mode and select this element, it shows that its height extends almost to the top of the page instead of to the bottom of the element above it (figure).
Just to see, I took out this h2 element so that the div under it took its place. This div did not have the same problem. It had a normal height and I was able to add a top margin to it just fine.
It seems to be just the heading tag that has this problem.
I'm thinking the issue has to do with the html in some way but I have no idea why.
Here's the link to the codepen:http://codepen.io/edsonmendieta/pen/jqjRry
Help is greatly appreciated, thank you.
The problem is that you're following a floated element. You'll need to apply one technique or another to clear the float. See here.
The simplest option is probably to use Bootstrap's built-in clearing class:
<div class="clearfix"></div>
<h2 class="text-center" id="books">Widely Known For</h2>
The bootstrap class .col-lg-12 which the figure above your h2 has, has float: left;. Floated elements are not calculated into the parent element 's height.
Remove that class from the figure element - this will fix it and let you change the top margin and distance of your h2 element.
http://codepen.io/anon/pen/WwVdPO
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How to delete the area under the navbar? I used the "margin-bottom: 0" and it's not working correctly.
just add .container class to your .wide div
<div class="wide container">
<h1>test</h1>
</div>
https://jsfiddle.net/grassog/1b0m6ztx/
use clearfix class with wide or just add overflow: hidden; in .wide to set h1 margin
<div class="wide clearfix">
<h1>test</h1>
</div>
or
.wide {
overflow: hidden;
}
Wrap all the content inside wide div with <div class="container"></div> to keep full width background image as it is in your screenshot.
<div class="wide">
<div class="container">
<h1>test</h1>
</div>
</div>
JSFiddle example
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am always having this issue and I always solved it using webkit-columns. But I wanna know if there is a better way to do it with Bootstrap.
4 boxes inside a grid.
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
This gives me the 4 boxes but the last box have more margin than the others. I want all of them to have the same margin, but 0 on the corners like the image:
--- EDIT FOR CLARIFY ---
For Clarify my question im gonna add this jsfiddle you see the blue box ? i want to the red boxes start and end with the blue box, can you do that ? not add margin to the blue box, the blue box must be 100% and the other box must be aligned with the first and end of that box
Here i do what i want: Jsfiddle but here im using -webkit-column just for show you, if you can do this with bootstrap that would be nice.
Im gonna share this Demo I created. I hope it gets you somewhere.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
</div>
</div>
CSS
.col-sm-3.custom-col{
height:250px;
/* outline: 1px solid green; */
padding: 5px;
}
.child-div{
height:100%;
width:100%;
background-color:red;
}
UPDATE
I updated the fiddle. HERE
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want 9 responsive <div> cells that fills the whole page like images below:
http://oi57.tinypic.com/2hf5lrk.jpg
I am using ionic framework. If the framework can help, please provide me an example. If not, the pure css would be great too.
well, see: http://ionicframework.com/docs/components/#grid-even
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div><div class="row">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div><div class="row">
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>