I have the following Grid system which looks like this:
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12" style="border: 1px solid black">A1</div>
<div class="col-12" style="border: 1px solid black">A2</div>
<div class="col-12" style="border: 1px solid black">A3</div>
<div class="col-12" style="border: 1px solid black">A4</div>
<div class="col-12" style="border: 1px solid black">A5</div>
</div>
</div>
<div class="col-4">
<div class="row" style="height: 100%">
<div class="col-12" style="border: 1px solid black; height: 100%">B</div>
</div>
</div>
</div>
</div>
https://codepen.io/slava4ka/pen/QWWwOax
How can we make it so that when reducing the size of the visibility zone to .col-sm-, the grid looks like this:
I find this way to be a bit cleaner to read the html. But there are probably lots of ways to achieve these results depending on the use case.
<style>
#media (min-width: 768px){
.special-col{
position: absolute;
right: 0;
}
}
</style>
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-8" style="border: 1px solid black">A1</div>
<div class="col-md-8" style="border: 1px solid black">A2</div>
<div class="col-md-8" style="border: 1px solid black">A3</div>
<div class="col-md-4 special-col" style="border: 1px solid black;height:100%;">B</div>
<div class="col-md-8" style="border: 1px solid black">A4</div>
<div class="col-md-8" style="border: 1px solid black">A5</div>
</div>
</div>
</div>
</div>
Since Bootstraps4 uses Flex-Box you could try this:
<div class="container" style="margin-top: 25px">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-12" style="border: 1px solid black">A1</div>
<div class="col-12" style="border: 1px solid black">A2</div>
<div class="col-12" style="border: 1px solid black">A3</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row" style="height: 100%">
<div class="col-12" style="border: 1px solid black; height: 100%">B</div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-12" style="border: 1px solid black">A4</div>
<div class="col-12" style="border: 1px solid black">A5</div>
</div
</div>
</div>
</div>
However, your B element would need a fixed height, otherwise it will be as tall as the others
Related
Similar to html layout with only part of the page scrolling But I'm looking for a fluid layout.
The problem with the current related question is, it was using float which resulting in a fixed view on the mobile view. I've tried using bootstrap span but I'm not sure if it was the alternative to the current snippet:
<div style="width:1250px;">
<div style="float:left; width:1000px">
<div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
<div style="height:200px; border:1px solid #fff000;">Sample Body</div>
</div>
<div style="float:right; width:100px; height:320px; overflow:auto;">
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
</div>
</div>
Bootstrap snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-5 col-12">
<div style="height:100px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content1</div>
<div style="height:120px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content2</div>
<div style="height:200px; border:1px solid #fff000;" class="col-xs-12 col-12">Sample Body</div>
</div>
<div class="col-xs-7 col-12">
<div style="border: 1px solid #ff00ff; height: 420px;
overflow: auto;">
<div>
<span>Scrollable</span>
</div>
<div style="height:1000px"></div>
</div>
</div>
</div>
How to implement bootstrap span or other alternative for fluid layout with only part of the page scrolling?
So you should use height:100vh for displaying full height of browser
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-5 col-12">
<div style="height:100px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content1</div>
<div style="height:120px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content2</div>
<div style="height:200px; border:1px solid #fff000;" class="col-xs-12 col-12">Sample Body</div>
</div>
<div class="col-xs-7 col-12">
<div style="border: 1px solid #ff00ff; height: 100vh;
overflow: auto;">
<div>
<span>Scrollable</span>
</div>
<div style="height:4000px"></div>
</div>
</div>
</div>
I want to center my divs like in the picture below.
The container is half of the screen.
<div id="continer" style="width:50%; height:50%; display:inline-block; ">
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
</div>
You could do this like that:
.main{
background-color:red;
padding:10px;
display:flex;
flex-direction:column;
}
.sub{
background-color:green;
padding:10px;
display:flex;
flex-direction:row;
justify-content:space-around;
margin:10px 0;
}
.inner{
background-color:yellow;
padding:10px;
margin:10px;
}
.inner:nth-child(1){
flex-grow:1;
}
.inner:nth-child(2){
flex-grow:3;
}
<div class="main">
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
</div>
Using bootstrap it's very simple, check this script. It will be also responsive:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="padding-top:50px;">
<h4>
bootstrap grid view/ column example
</h4>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
</div>
</body>
</html>
Here an example similar to your code:
div
{
border: 1px solid black;
padding: 5px;
border-spacing: 5px;
}
<div style="width:50%;display:table">
<div style="display:table-row">
<div style="width:30%; display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</div>
I'm trying to fit a border around a resized image but it takes the dimensions of the original. How do I place a perfect border around an image?
HTML:
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
</div>
</div>
CSS:
#show img {
padding-top: 50px;
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}
Remove the padding-top and the border will be flush with the img
#show img {
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
</div>
</div>
I have the following code:
<div class="row row-space">
<div class="row" style="border: 1px solid red;">
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
The problem is, all .row divs take full width of parent outer div (as expected)
but the ones with col-lg-12 or (col-lg-6 + col-lg-6) are not taking the full width.
I am expecting the black boxes to be divided equally inside the red box. I am not applying any other styles to the HTML.
Because their parent is col-lg-6, change to col-lg-12
See more about twitter-bootsrap grid here
UPDATE -based on your updated as well
You have extra unnecessary markup. So see snippet below:
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-space" style="border: 1px solid red">
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD A</div>
</div>
<div class="col-lg-6" style="border: 1px solid black;">
<div>CHILD B</div>
</div>
</div>
add div container with class "container-fluid" with max-width: 900px;
for example
codepen.io
<div class="container-fluid">
<div class="row row-space">
<div style="border: 1px solid red;" class="row">
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD A</div>
</div>
</div>
<div style="border: 1px solid black;" class="col-lg-6">
<div class="row">
<div>CHILD B</div>
</div>
</div>
</div>
</div>
.container-fluid{
max-width: 900px;
}
I am trying to design a responsive page like this
using margin and padding i tried to somehow match the design but failed...
here is the basic sample code i tried...
<div class="container" style="border:1px solid red;">
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid brown;">
section1
</div>
<br/>
<div class="row col-lg-12" style="border:1px solid brown;">
section2
</div>
</div>
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid blue;">
section3
</div>
</div>
</div>
I need some help.. Thank you..
You can try this.
<div class="row">
<div class="col-xs-8">
<div class="col-xs-12">
<div class="well" style="height: 100px">
</div>
</div>
<div class="col-xs-12">
<div class="well" style="height: 40px">
</div>
</div>
</div>
<div class="col-xs-4">
<div class="well" style="height: 140px">
</div>
</div>
It is just a demo. You can add border, height on your own.
You need to add some negative margins to the left and right of your inner divs. Also, containers within containers is not good practice, and it gets messy on various browser sizes.
http://www.bootply.com/6FWRFHv62f
CSS
.n-margin{margin-left:-30px; margin-right:-30px;}
HTML
<div class="container" style="border:1px solid red;">
<div class="row">
<div class="col-xs-6 n-margin">
<div class="col-xs-12" style="border:1px solid brown;height:200px;">
section1
</div>
<div class="col-xs-12" style="border:1px solid brown;height:60px">
section2
</div>
</div>
<div class="col-xs-6 n-margin pull-right">
<div class="col-xs-12" style="border:1px solid blue;height:260px">
section3
</div>
</div>
</div>