<div class="row">
<div class="col-md-12">
<div class="well" style="overflow: scroll">
<div class="col-md-1"> Date </div>
<div class="col-md-1"> Revenue </div>
<div class="col-md-1"> Discounts </div>
<div class="col-md-1"> Items </div>
<div class="col-md-1"> Purchased </div>
<div class="col-md-1"> OV </div>
<div class="col-md-1"> AOV </div>
<div class="col-md-1"> AIO </div>
<div class="col-md-1"> TV </div>
<div class="col-md-1"> UV </div>
<div class="col-md-1"> RPV </div>
<div class="col-md-1"> VCR </div>
<div class="col-md-1"> UCR </div>
<div class="col-md-1"> ATC </div>
<div class="col-md-1"> CCR </div>
</div>
</div>
</div>
Bootstrap not scrolling on overflow. instead it is breaking into new line. How do I make it scroll. I want it to scroll in x-axis
Fixed Your Issue
div.well {
overflow-x: auto;
white-space: nowrap;
}
div.well [class*="col"]{
display: inline-block;
float: none;
}
Demo : https://jsfiddle.net/hellosrini/63gnLaq9/
You can do it like this.
.col{
display: inline-block;
margin-right: 4px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="well" style="overflow-x: scroll; ">
<div class="col" style="display: inline-block"> Date </div>
<div class="col"> Revenue </div>
<div class="col"> Discounts </div>
<div class="col"> Items </div>
<div class="col"> Purchased </div>
<div class="col"> OV </div>
<div class="col"> AOV </div>
<div class="col"> AIO </div>
<div class="col"> TV </div>
<div class="col"> UV </div>
<div class="col"> RPV </div>
<div class="col"> VCR </div>
<div class="col"> UCR </div>
<div class="col"> ATC </div>
<div class="col"> CCR </div>
</div>
</div>
</div>
</body>
</html>
You can have grid of maximum 12 columns. So you cannot use col-md-1. You can set its width to fit you available area.
Related
I have a layout of 6 div tags of fixed height across 2 rows. When I add any margin around the divs, the right most div is pushed down a row. How do I counteract this?
HTML:
<div class="container">
<div class="row">
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
ty
</div>
</div>
<div class="row">
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
ty
</div>
</div>
</div>
CSS:
.frontPageCells{
background-color: white;
height: 200px;
margin: 2px;
}
Tried to offset the margin with a negative padding value but predictively this did nothing
a simple hack is to add col-12 inside your col-4 div
.frontPageCells {
background-color: red;
height: 200px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
</div>
<div class="row">
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
</div>
</div>
</body>
</html>
I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>
I have trouble aligning my divs with bootstrap. The big div in the middle is pushing down the boxes at the sides. How can I achieve this layout?
The layout of divs I want to achieve:
I've been working with this code, tell me if it's what you need:
HTML:
<div class="row">
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 medium">
</div>
</div>
<div class="row">
<div class="col-md-12 medium">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
</div>
</div>
CSS:
.small{
height:100px;
border: 1px solid;
}
.medium{
height:200px;
border: 1px solid;
}
.large{
height:400px;
border: 1px solid;
}
Hope it helps!
Based on the image you have provided i have created below sample design please check it. In order to achieve your design i have written some inline css please check it as well
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
This is testing data
</div>
<div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
This is center content
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
</div>
</div>
</body>
</html>
Declare three main divs and place children divs in it. Check below image. In responsive status parent 100% children side by side
https://i.stack.imgur.com/1qTPG.png
.border_black{
border: thin black solid
}
.margin_top_10px{
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">
<p>Left Side Contents 1</p>
</div>
<div class="row border_black margin_top_10px">
<p>Left Side Contents 2</p>
<p>Left Side Contents 2</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
<p>Center Contents</p>
<p>Center Contents</p>
<p>Center Contents</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">Right Side Contents 1</div>
<div class="row border_black margin_top_10px">Right Side Contents 2</div>
<div class="row border_black margin_top_10px">Right Side Contents 3</div>
</div>
</div>
</div>
Here is JSFiddle
Hope this helps.
In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...
<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>
<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>
<p class="brief_Desc_a">
</p>
<p class="det_DescF" ng-show="readMore">
</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>
</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<img class="img-responsive" src="images/Future_trends_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<img class="img-responsive" src="images/Related_careers_v02.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">
</div>
<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>
</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>
<div class="groups col-sm-4">
<div class="courses_Colleges">
<img class="img-responsive " src="images/Courses_Colleges_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>
</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">
<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->
<div ></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.border{
border: 2px solid black;
}
.heightWidth{
height: 200px;
width: 200px;
}
</style>
<body>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
your middle section the text part goess here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
</body>
</html>
This will work.
I am working on a design for a website and practicing bootstrap in the meantime, so I am rather new to it. Now, I understand the grid division into 12 columns and then layering of elements into multiple rows and separating by column span. The question I have is how can I handle elements that span multiple rows next to the elements that span less.
Desired Layout Example
Now, on this example image, how would I accomplish the stacking of the 3 x 4 and the 3x2 and 3x3 blocks? Also, the elements shouldn't be resized vertically.
Since I am relatively new to Bootstrap and responsive design in general, I am open for other frameworks and/or workarounds.
Something like this needs quite a lot of nested containers to get your desired effect but it is all possible.
The heights of some of the elements is a little bit off but once content is filled out, it should look fine.
Below is a working example
div {
border: 1px solid #000;
box-sizing: border-box;
}
div div {
border: 1px solid #444;
}
div div div {
border: 1px solid #888;
}
div div div div {
border: 1px solid #bbb;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
3x2
</div>
<div class="row">
3x3
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-4">
3x4
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-12">
6
</div>
<div class="col-xs-12">
6
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Something like below. It is not complete HTML, but it can give you an idea as to how you can use the horizontal and vertical bootstrap grids (basically through nesting):
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='container'>
<div class='row'>
<div class='form-horizontal'>
<!--First Row-->
<div class='form-group'>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
</div>
<!--Second Row-->
<div class='form-group'>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>