I have here my example in fiddle. I am using bootstrap. What I want to do is have the '150' and the 'points' be in the same row right next to each other. Is this possible? How can I do this?
My html looks like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Content Submissions: </h4>
</div>
<div class="col-md-6">
<div class="col-md-4 pull-right">
<h2>user name</h2>
<div class="row-fluid">
<h2><strong>150 </strong></h2>
<p><small>Points</small></p>
</div>
Account Settings
</div>
</div>
</div>
</div>
Use following css:
.row-fluid {
display: flex;
}
h2 {
margin-top: 0;
}
Working Fiddle
.row-fluid {
display: flex;
align-items: center;
}
h2 {
margin-top: 0;
margin-right: 10px;
}
hi i have made few changes to your html, try this
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Content Submissions: </h4>
</div>
<div class="col-md-6">
<div class="col-md-4 pull-right">
<h2>user name</h2>
<div class="row-fluid">
<div class="col-lg-6 col-xs-6">
<h2><strong>150 </strong></h2>
</div>
<div class="col-lg-6 col-xs-6">
<p><small>Points</small></p>
</div>
</div>
Account Settings
</div>
</div>
</div>
</div>
<style>
h2{margin:0;}
</style>
Related
I have a row with two cols:
a) For the name of the list
b) For an edit button.
col-md-6 works great for when the list's name is short, but when is longer it renders clunky.
Clunky:
html
<div class="row">
<div class="col-md-6">
<h1 class="box">Lista: {{ lista.name }}</h1>
</div>
<div class="col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
It gets worse for mobiles, where the list's name should be on top of the button "Editar".
if you use bootstrap
<div class="row">
<div class="col-md-8 col-sm-6">
<h1>welcome to my blog</h1>
</div>
<div class="col-md-4 col-sm-6>
<button class="btn">hello</button>
</div>
</div>
just css
<div class="contains">
<div class="text">
<h1>welcome to my blog</h1>
</div>
<div class="button>
<button class="btn">hello</button>
</div>
</div>
<style>
.contains {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text{
width: 60%;
}
.button{
width: 40%;
}
</style>
add (col col-md-6) not (col-md-6)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-md-6">
<h1 class="box">Lista: Mi Primary List</h1>
</div>
<div class="col col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
I am trying to align three elements in a div in such a way that the image is inline with h1 while the p tag is beneath the h1 tag.
.valign{
position:relative;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
.banner{
position: relative;
height: 100vh;
width:100vw;
background: #eee;
}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<img src="img/logo.png" style="height: 150px;width: 150px">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
Here is an image for reference:
This is how the elements must be arranged
This is how the elements are looking right now:
This is a screenshot of the webpage
Any help would be appreciated.
Try this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="float-xs-left float-sm-left float-md-left">
<img src="img/logo.png"></div>
<div class="float-xs-left float-sm-left float-md-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
the class value for float is based on bootstrap 4
Try this html
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div style="float:left">
<img src="img/logo.png" style="height: 150px;width: 150px"></div>
<div style="float:left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
Use floats, Bootstrap provides pull-left and pull-right helper classes, so use it on the two parts of your layout to have them side-by-by.
You need to add some margins here and there to make it look good.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="row">
<div class="pull-left">
<img src="img/logo.png" style="height: 150px;width: 150px">
</div>
<div class="pull-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/n8o1w3cq/
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I have this HTML:
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
And CSS:
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0px;
}
I'm also using bootsrap (version 3).
I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow?
I need all "squares" next to each other without any margins (both between rows and columns).
You can see how it looks here: https://jsfiddle.net/a91zujkj/
If you really want to use col- class, make sure to set the .thumbnail elements width to 100% and use a no-padding class on the col- elements.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box {
width: 300px;
padding-top: 100px;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.thumbnail {
width: 100%;
height: 100px;
margin: 0;
}
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
You actually do not need to use col- classes at all and floats are not needed either. Another way to do this is using display: inline-block.
Here is how that looks:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
width: 300px;
padding-top: 100px;
margin: 0 auto;
font-size: 0;
}
.item {
border: 1px solid #eee;
width: 100px;
height: 100px;
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
And if you're really brave you could also use CSS Grid layout. ;)
CSS Grid Layout
CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here is how that goes:
.wrapper {
padding-top: 100px;
width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
.item {
border: 1px solid #ddd;
height: 100px;
width: 100px;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
It's because .col-*-4 is wider than 100px, which is the width you've defined for the .thumbnail elements.
You can just remove the .col-* classes and use .pull-left instead.
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Remove padding-left and padding-right for .col classes and then change width: 100px; to width: 100%; for .row > div > div
.box {
width: 300px;
padding-top: 100px;
}
.padding-0{
padding-right:0 !important;
padding-left:0 !important;
}
.row > div > div {
width: 100%;
height: 100px;
margin: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Row has it's own style and add margin to element, you can remove it by adding :
.box >.row{
margin:0;
}
I have these panels inside different rows. To easily show my problem, and my desired output, here's a visual...
At the left side is the problem I encounter, and at the right side is the desired output. I was wondering how it's possible to make the right panel overlap to the other row.
My html's structured something like this, which is all inside a .container-fluid(if that contributes to the problem)...
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- top-left panel --> </div>
</div>
<div class="col-md-6">
<div class="panel"> <!-- right panel --> </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- bottom-left panel --> </div>
</div>
</div>
I'm using bootstrap.
p.s. sorry for the html "sample", not familiar yet on how to use the html snippet
Use flex
.flex{
display:flex;
}
.flex-1{
flex:1;
}
.height-50{
height:50px;
}
.margin-r-15{
margin-right:15px;
}
.border-1px{
border:1px solid black;
}
<div class="flex">
<div class="flex-1 margin-r-15">
<div class="height-50 border-1px" >
</div>
<div class="height-50 border-1px">
</div>
</div>
<div class="flex-1 border-1px">
</div>
</div>
You can code left div's in one wrapper and right one in another.
HTML
<div class="row">
<div class="col-md-6">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6">
<div class="panel">
// right panel
</div>
</div>
</div>
According to your visual above html will be fine but heights are not managed in this.
If you wish to have same height of right box according to left main box then use follwing code
HTML
<div class="row main">
<div class="col-md-6 inner">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6 inner">
<div class="panel">
// right panel
</div>
</div>
</div>
CSS
.main{
display:flex;
}
Please try like this:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
</div>
Please try this:
<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12 col-s-12">
<div class="col-lg-12 col-md-12">
//Your Content Here
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
</div>
If you can use separate columns (as shown in Gaurav's answer) that will work. If the height of the panels is unknown (variable) here isn't really a simple way. Another option is to put all your cols in a single row and use CSS3 column-width..
.row {
-moz-column-width: 50em;
-webkit-column-width: 50em;
-moz-column-gap: .1em;
-webkit-column-gap: .1em;
}
.col-md-6 {
float:none;
display: inline-block;
margin: .1em;
width: 100%;
}
http://www.bootply.com/6ynLAwenzq