Bootstrap col-* not taking full width - html

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;
}

Related

How to make my layout responsive using Bootstrap 4

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

Alternative for html layout with only part of the page scrolling

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>

How to align Bootstrap grids like a masonry layout?

My grid setup now is as follows:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class='col-md-12 col-sm-12 col-xs-12'>
<div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 1
</div>
<div class='col-md-3 col-sm-3 col-xs-12'style="height:320px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 2
</div>
<div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 3
</div>
</div>
My current output is
I want to get rid of the white space between div 1 and div 3. I don't want to merge div 1 and div3 because in mobile mode div 2 goes below div 3.
My expected outcome is
How can I achieve this in bootstrap?
Its quite simple: below is a demo for the same using bootstrap 4.
A grid must be wrapped inside a container and a col always inside a row.
div {
background: skyblue;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12">
DIV 1
</div>
<div class="col-12 d-block d-md-none">
DIV2 on small
</div>
<div class="col-12">
DIV 3
</div>
</div>
</div>
<div class="col-md-4 d-none d-md-block">
DIV 2
</div>
</div>
</div>
Here is a JSFIDDLE link to play around with
How about this
<div class="row">
<div class="col-sm-9">
<div>
div 1
</div>
<div class="visible-xs">
div 2
</div>
<div>
div 3
</div>
</div>
<div class="col-sm-3 hidden-xs">
div 2
</div>
</div>
Here's a JSfiddle https://jsfiddle.net/rutmws7a/

Sets divs one into another without falling out each other

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>

How to achieve this following design using twitter bootstrap 3

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>