asked on

bootstrap columns are not aligning side by side

Hi experts

Bootstrap columns are not aligning side by side. Please see the below reactjs code

  <div className="container-fluid" style={{margin:0,padding:0,height:'auto',minHeight:'100%',minWidth:'100%'}}>
                <div className="row">
                     <div className="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7" style={{height:'auto'}}>
                         {this.props.children}
                     </div>
                     <div className="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" style={{color:"#6F7070",
                          height:'auto'}}>
                          <div className='selectable' style={{fontSize: 18}}>
                             <div>
                                 <div style={{fontSize:24, fontWeight:'bold'}}>{record.title}</div>
                                     <div style={{fontSize:12, fontWeight:'bold'}}>Date Created:{date}</div>
                                     <div style={{fontSize:12, fontWeight:'bold',fontStyle:'italic'}}>{record.type}</div>
                                 </div>
                             </div>
                             {fullRecord}
                             <div style={{display:'inline-block',margin:0,padding:0,marginTop:15,marginBottom:10}} className="row">
                                 <span> Details <hr style={{height:3,display:"inline-block",backgroundColor:"#AAC33C",
                                     width:270,verticalAlign:"middle",marginLeft:10}}/>
                                 </span>
                             </div>
                             <div style={{display:'block',margin:0,padding:0,width:800}}>
                                <div className='row' style={{margin:0,padding:0}}>
                                     <span style={{display:'inline-block',width:200,fontWeight:'bold',fontSize:12}}>Source </span>
                                     <span><img src="../../../static/images/source-ntl.jpg"></img></span>
                                </div>
                             </div>
                             {metadataList}
                             {moreDetails}
                             <RecordActions item={record} download={this.props.download} />
                           </div>
                     </div>
               </div>

Open in new window

are not side by side

lenamtl

Hi,

I cannot say about react but what I would do if I was you is to make sure the template is ok first then add react to it
This may help to troubleshooting.

To have a great look and feel and well code (this save a lot of time)
You can buy cheap Bootstrap template https://themeforest.net/

coder

ASKER

Hi Lenamtl

Thanks for your response.

I am not using any templates I creating the code from scratch.

My problem is

 <div className="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7" style={{height:'auto'}}>
                         {this.props.children}
 </div>
 <div className="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" style={{color:"#6F7070",
                          height:'auto'}}>
</div>

Open in new window

the two columns are not side by side in desktop it is one below the other.

With Many thanks,
Bharath AK

lenamtl

Hi,

Bootstrap total per size (sm md lg ..) is 12 per row.

So when you set column to 12 it's mean 1 column
if you set it 2 div to 6 it's mean 2 columns

So depending of the version you should follow the structure of a div.

Bootstrap 3
https://getbootstrap.com/docs/3.4/css/#grid
https://getbootstrap.com/docs/3.4/getting-started/

Bootstrap 4 have new extra way to do it .
https://getbootstrap.com/docs/4.3/layout/grid/
https://getbootstrap.com/docs/4.3/examples/

Note: do not use inline style as it may cause issue with Bootstrap and we do not using this these days.
Just create your new class and add it to your style.css file and to your html item.

coder

ASKER

Hi,

I will let you know once I fix this.

Many thanks,

Bharath AK

ASKER CERTIFIED SOLUTION

coder

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

coder

ASKER

Thanks for your help and suggestions.