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>
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 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.
I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>
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.
<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.