i'm new to programming so can anyone tell me how can I moved this box next to another box? i want to make 3 column, here's some illustration hopefully helpful

this is my demo:

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}

<section >
        <div >
            <div >

                <div >
                    <div >
                        <div >
                            <div >
                                <h5>Main Menu</h5>
                            </div>
                            <div >
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div  data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div  data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div  data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div  data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

Anyone knows how to do it? Thank you everyone!

CodePudding user response：

Do you mean like this?

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: red;
  font-weight: 700;
  line-height: 26px;
}

.coloumn {
  display: flex; 
  justify-content: space-evenly;}

<section >
        <div >
            <div >

                <div >
                    <div >
                        <div >
                            <div >
                                <h5>Main Menu</h5>
                            </div>
                            <div >
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div  data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div  data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div  data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div  data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

CodePudding user response：

You have to add row class to column div and col-4 to children divs, like this:

<div >
    <div  data-setbg="/assets/2.jpg">
        <h5><a href="/billing">Survey</a></h5>
    </div>
    <div  data-setbg="/assets/1.jpg">
        <h5><a href="#">Actor Mapping</a></h5>
    </div>
    <div  data-setbg="/assets/4.jpg">
        <h5><a href="#">Political Text Analysis</a></h5>
    </div>
    <div  data-setbg="/assets/4.jpg">
        <h5><a href="#">Social Media Network Analysis</a></h5>
    </div>
    <div  data-setbg="/assets/3.jpg">
        <h5><a href="#">Media Monitoring</a></h5>
    </div>
</div>

CodePudding user response：

im usually use like this on BS

seems like u put all img in one col

<div >
    <div >
        <p >111</p>
    </div>
    <div >
        <p >222</p>
    </div>
    <div >
        <p >333</p>
    </div>
</div>

or using Flex can do like this
CSS:

.displayFlex{display:flex;}
.flex1{flex:1;}

HTML

<div >
    <p class='flex1'>111</p>
    <p class='flex1'>222</p>
    <p class='flex1'>333</p>
</div>