How can i create a custom column in css or bootstrap

Question

I usually work with the bootstrap columns and grids, but just today i tried to do something quite different and realised I wasn't so good with bootstrap

i'm trying to achieve a column like in the picture below one full height by the left and 2 half height by the right

so i have something like in the code above, we all know that gives us two equal height and width columns side by side, but how can i manipulate this to give what is desired in the image?

NB: I'm going to put images in all three columns

user_5090346 · Answer

Just add two block divs in your second col-md-6 div - the rest is css

Check out fiddle here

user_2802040 · Answer

If you are using Bootstrap4, you need to add a .row div then use the flexbox utility classes on the column.

.col-sm-6 {
  border: 1px solid grey;
}

.col-sm-6 div {
  border: 1px solid red;
  flex: 1;
}



  
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia, quisquam. In unde sint dolor. Suscipit accusantium accusamus nemo minima Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam ipsam labore neque maxime reiciendis iste,
      commodi aut cumque perferendis quaerat sed nisi, minus vero doloribus, quis iure? Quasi commodi nisi quos dicta pariatur voluptatem delectus facere tempore expedita blanditiis ducimus eaque iste reprehenderit voluptatum, natus reiciendis suscipit
      tempora voluptas?
    
    
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, deleniti?
      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, inventore.

user_10678978 · Answer

I'd suggest splitting the second column into another two sections.

.container-fluid {
  background: #7F3300;
  padding: 35px;
}

div {
  border: 1px solid black;
  padding: 0;
}

.column-1 {
  background: #808080;
  padding: 35px;
}

.column-2 {
  background: #007F7F;
  padding: 35px;
}

.column-3 {
  background: #FF7F7F;
  padding: 35px;
}

img {
  width: 100%;
}

Edit: I've added in some images to show you how you could do the same.

user_10923048 · Answer

try it with css

.container-fluid .col-md-12{
       width:100%;
       height:100px;
       background-color:brown;
       background-border:none;
}
.col-md-6{
       width:40px;
       height:50px;
       background-color:green;
       background-border:none;
       float:right;
}
.col-md-6.1{
      background-color:green;
}
.col-md-6.2{
      background-color:pink;
}
.col-md-7{
       width:80px;
       height:100px;
       background-border:none;
       float:left; 
       padding-right:30px;
}

Edit your HTML code like this

How can i create a custom column in css or bootstrap

4 Answers