I'm trying to use LESS framework 4, and i've create this css code:
#sponsor .ristorante {
width: 92px;
float:left;
margin-bottom: 30px;
}
#sponsor .ristorante .name {
font-size: 14px;
}
and in html file:
<div id="sponsor">
<div class="ristorante">
<div class="name">RISTO1</div>
</div>
<div class="ristorante">
<div class="name">RISTO2</div>
</div>
<div class="ristorante">
<div class="name">RISTO3</div>
</div>
<div class="ristorante">
<div class="name">RISTO4</div>
</div>
<div class="ristorante">
<div class="name">RISTO5</div>
</div>
<div class="ristorante">
<div class="name">RISTO6</div>
</div>
<div class="ristorante">
<div class="name">RISTO7</div>
</div>
<div class="ristorante">
<div class="name">RISTO8</div>
</div>
<div class="ristorante">
<div class="name">RISTO9</div>
</div>
<div class="ristorante">
<div class="name">RISTO10</div>
</div>
</div>
but in broweser see 9 risto in first line and one risto in seconvd line!
instead, body layout default is width:896 with 10columns
how can i have ten columns??
thanks!
the width of your elements is pushing the last one to a new line.
10 x divs # 92px wide each is 920px for all columns. If I understand you correctly you have 896px set.
Change your wrapper width to 920px and you'll be ok. OR change your ristorante width to 89px
Related
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
I am trying to display three image in same row
for that i am using
<div ng-repeat="p in imageses">
<div class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
this is showin only one image at a line i want to show three images per line
Try this.
<div class='row'>
<div ng-repeat="p in imageses" class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The basic structure should be following:
<div class="container"><!--use container-fluid if you want full width-->
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
For better clarification please check their doc
I want to vertically centre <div> tags that have a horizontal margin between each other.
The problem is that this behavior appears to be inconsistent between text-align: center and text-align: -webkit-center or text-align: -moz-center:
.parent {
display: inline-block;
border: 1px dotted #fd0;
position: relative;
}
.parent.ta {
text-align: center;
}
.parent.browser-ta {
text-align: -webkit-center;
text-align: -moz-center;
}
.child {
display: inline-block;
vertical-align: top;
}
.child > .content {
display: block;
margin: 0 10px;
border: 1px solid #888;
width: 200px;
text-align: left;
}
.wrong {
background-color: #e00;
color: #fff;
}
.right {
background-color: #0a3;
color: #fff;
}
<div>
Using <tt>text-align: center</tt>;
<div class="parent ta">
<div class="child">
<div class="content wrong">child 1 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content wrong">child 2 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child ">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
</div>
<br>
<br>
<div>
Using <tt>text-align: -vendor-center</tt>
<div class="parent browser-ta">
<div class="child">
<div class="content right">child 1 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 2 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
Run that snippet and the two similar HTML and CSS produce different layouts in Chrome (Webkit/Blink) and FireFox. The red panels are in the wrong location, the green ones are correct.
So text-align: -webkit-center and text-align: -moz-center appear to be correct (to me) but text-align: center appears to be bugged in both browsers.
Digging out the venerable old <centre> tag (that we're not supposed to use) and that works right too (though examining it reveals it uses the browser prefix too).
Is this correct? Is this a bug? Is there a reason for the difference? Which one should I use?
The prefixed values are described by MDN to be "block alignment values", which means block boxes themselves are aligned in addition to the inline content within them. This is the exact behavior of the <center> element, and the prefixed values are in fact intended for that element — if you look in the UA stylesheets for each engine you'll find a ruleset that says exactly center { display: block; text-align: -vendor-center; }.
The reason text-align: center is not implemented this way is because text-align is designed to affect inline-level boxes (as evidenced by the "text-" in its name), not block-level boxes. But that, I suspect, is not the answer you're really looking for.
What's happening is that the boxes that are actually being aligned in your snippet are the .content elements, which are block boxes, not inline-blocks. The reason that last element is being centred is because its parent, an inline-block, is being shrink-wrapped, and itself then centred by the text-align: center declaration in its ancestor.
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}
how to put content in column horizontally like below,
(column1) (column2) (column3)
1.asd 2.asd 3.asd
4.asd 5.asd
this flow is required in the website
For columns in css3, you have to have a div structure for that...
Html:-
<div class="table">
<div class="column">
<div class="row">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="column">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="column">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
</div>
Css:-
.table { columns:3; -webkit-columns:3; -moz-columns:3; text-align:center }
.column { }
.row { background-color:red; }
Demo:- http://jsfiddle.net/5P9c4/1/