I am trying to create a page with Bootstrap. The idea is create 3 columns on the left show star (links), in center a word "Infilmtrats" in Catalan, and right other stars (other links)
But it deforms both computer, mobile and tablet. I would like to look good in the 3 devices...
Mobile devices in the 2nd column is not centered , and third jumps to the next line ( after the word " infilmtrats " ) .
You know some idea? I'm trying to "float" but no way , I spend my code.
Thank you very much .
CURRENT. http://www.infilmtrats.com/interrogatorios/
YES, SHOULD BE http://oi60.tinypic.com/28b8mu0.jpg
<div class="row">
<div class="pull-left"><br/><br/><br/>
<p><img src="start.gif" alt="estrella" width="52" height="47" class="size-full wp-image-302" /></p>
</div>
<div class="centered" style="text-align: center;">
<h1 style="color: #ffffff;">I<br /> N<br /> T<br /> E<br /> R<br /> R<br /> O<br /> G<br /> A<br /> T<br /> O<br /> R<br /> I<br /> O<br /> S<br /> </h1> </div>
<div class="pull-right">
<p><img src="start.gif" alt="estrella" width="52" height="47" class="aligncenter size-full wp-image-302" /></p>
</div>
You need to add your column divs. Like this:
<div class="row">
<div class="col-sm-4">
<div class="pull-left"> ... <div>
<div>
<div class="col-sm-4">
<div class="centered"> ... <div>
<div>
<div class="col-sm-4">
<div class="pull-right"> ... <div>
<div>
</div>
You need to use the column classes of the grid system. By default there are 12 columns in the grid system. If you want 3 columns then divide 12/3 = 4 to get how wide each column should be.
<div class="row">
<div class="col-xs-4">
Left
</div>
<div class="col-xs-4">
Center
</div>
<div class="col-xs-4">
Right
</div>
</div>
The various sizes that are associated with the columns (xs, sm, md, lg) determine at what point the columns will become full width and begin stacking.
Related
I'm trying to get three images to cumulatively take up an entire bootstrap row (effectively each taking up a column that spans 4). However, my code right now has them leaving gaps in between, and on either side. I've attached a screenshot of the problem, with the ideal solution to have the images take up the entire space without leaving any gaps. Below is the relevant html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%">
</div>
</div>
</div>
</body>
Screenshot of Issue
Bootstrap columns have default right and left padding of 15px. Inspect the columns in devtools and you will see it. You need to over ride it with your own custom css.
Here you go with a solution https://jsfiddle.net/hhzbxrbf/
.col-md-4 {
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" />
</div>
</div>
</div>
</body>
I'm working on a project based on Semantic UI and using it's grid system. The fist part of code using grids works fine:
<div className='ui grid fluid container'>
<div className='stackable six wide column' id='logo'>
<img src='/images/home/icone-logo.svg' />
</div>
<div className='twelve wide mobile nine wide tablet nine wide computer column' id='nome'>
<img src='/images/home/nome-logo.svg' />
<br />
<br />
<span id='slogan'>Um sistema de estudo feito para você</span>
</div>
</div>
On the second part, the element loads the ui and grid styles but not the column style that should organize it.
<div className='ui grid fluid container'>
<div className='four wide cloumn'>
<img src="/images/home/ALUNO.svg" />
</div>
<div className="four wide cloumn">
<img src="/images/home/prof.svg" />
<div className="solucao-content">
<p>Lorem ipsom</p>
</div>
</div>
<div className="four wide column">
<img src="/images/home/pais.svg" />
<div className="solucao-content">
<p>Lorem ipsom</p>
</div>
</div>
<div className="four wide column">
<img src="/images/home/escola.svg" />
<div className="solucao-content">
<p>Lorem ipsom</p>
</div>
</div>
</div>
The first part is just under the body tag, the second one is under an other div.
Even when I tried loading the same first code on the place of the second one, it doesn't render properly.
I'm trying to build a page with a lightbox gallery and an included menu down the side. When the menu is included it creates a large space between the gallery rows that I can't remove which goes away when the menu is removed.
<tr>
<td rowspan="10" id="body-text-other">
<span style="float:left;"><?php include("includes/header-store.html") ?></span>
<span style="width: 100px;"><?php include("includes_releasing/store_menu.html") ?></span>
<div>
<p id="body-text-lrg">Pledge Cards</p>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Arise-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Reluctance-thumbnail.png" alt="" />
</div>
</div>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Correlation-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Dissidence-thumbnail.png" alt="" />
</div>
</div>
Thanks
Welcome to SO. If you could provide more sample code we can take a better look at it. The problem may be that you are using tables and the default padding/margin are making it bigger.
If you could provide a JSFiddle we can help more.
Thanks and goodluck.
http://jsfiddle.net/
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>
For some kind of menu I would like a box of 300 pixels width, with the items in it aligned to the right. I came up with the following code which works just fine in IE and Chrome, but not in FF :
<div style="width:300px;" align="left">
<div align="right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
UPDATE : In FF, the images are on the right side of the screen, in stead of aligned right at 300px from the left.
UPDATE 2 : The solution appeared to be text-align...
OK, after a lot of trying out things, I found it myself : text-align does the trick
(although it's aligning images here)
<div style="width:300px; text-align:right;">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
Try that:
<div style="width: 300px;">
<div style="float: right;">
<img src='images/item1.png' />
</div>
</div>
Oh and also, don't use HTML align parameters, use style.
Try using this instead:
<div style="width=300px;">
<div style="float: right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
try this width : not width =
<div style="width:300px;">
<div style="float: right">
<img src="images/item1.png">
<br />
<img src="images/item2.png">
<br />
<img src="images/item3.png">
<br />
<img src="images/item4.png">
<br />
</div>
</div>
<div style="width:300px;">
<div style="float:right">
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
</div>
</div>