Mostrar 2 columnas dentro de row. Bootstrap

Resulta que tengo el siguiente codigo (esta recortado para que no se tan grande)

CODIGO DONDE MUESTRO 2 DATOS EN COLUMNAS

<div class="card-body">             <div class="row">                 <div class="col-md-12">                     <div id="subida">                         <form action="subirData" method="post">                             <div class="col-md-6 form-group"> //PRIMERA COLUMNA                                 <div class="form-group row">                                     <label for="" class="col-sm-4 col-form-label">Fecha de Ingreso</label>                                     <div class="col-sm-4">                                         <input type="text" class="form-control fechaIngreso" name="fechaIngreso">                                     </div>                                 </div>                             </div>                             <div class="col-md-6 form-group"> //SEGUNDA COLUMNA                                 <div class="form-group row">                                     <label for="" class="col-sm-4 col-form-label">Fecha de Ingreso</label>                                     <div class="col-sm-4">                                         <input type="text" class="form-control fechaIngreso" name="fechaIngreso">                                     </div>                                 </div>                                 <div class="form-group row">                                     <label for="" class="col-sm-4 col-form-label">Placa</label>                                     <div class="col-sm-4">                                         <input type="text" class="form-control placa" name="placa">                                     </div>                                 </div>                             </div>                             <input id="submit-all" type="submit" value="Subir" />                         </form>                     </div>                 </div>             </div>         </div> 

Cuando veo el resultado queda asi:

introducir la descripción de la imagen aquí

Los 2 ultimos input me gustaria que quedaran en donde esta el cuadro rojo, como en este ejemplo:

introducir la descripción de la imagen aquí

Que esta mal en el codigo (no se si mal acomodado o no se)

Need to expand row# 3 and column# 0 but do not want row #1 and column# to expand

I am using grid geometry and my need is to expand only the canvas on maximizing of the window. The canvas is on a frame which is at row#3 and column#0. When I do master.grid_rowconfigure(3,weight=1) self.canvasFrame.grid_rowconfigure(0,weight=1) then the canvas gets expaned on the row but I also need to expand it on the column. so I did master.grid_columnconfigure(0,weight=1) self.canvasFrame.grid_columnconfigure(0,weight=1)

but it also expanded the column#0 of row#1. I do not want that.

Here is my code.

Is it possible to achieve using grid geometry manager?

from tkinter import * from tkinter import ttk from tkinter import messagebox  class MainUI:     def __init__(self,master):         self.master = master          # row 1         ttk.Label(self.master, text="Customer").grid(row=0, column=0, sticky=W, pady = 5, padx = 15)         ttk.Label(self.master, text="Items").grid(row=0,column=1, sticky=W, pady = 5, padx = 15)         ttk.Label(self.master, text="Price").grid(row=0,column=2, sticky=W, pady = 5, padx = 15)         ttk.Label(self.master, text="Cost").grid(row=0,column=3, sticky=W, pady = 5, padx = 15)          # row 2         self.customerCombo = ttk.Combobox( self.master,                                              values=[])         self.customerCombo.grid(row=1,column=0, sticky=W, pady = 5, padx = 15)          self.jobCombo = ttk.Combobox( self.master,                                              values=[])         self.jobCombo.grid(row=1,column=1, sticky=W, pady = 5, padx = 15)          self.estLaborEntry = ttk.Entry(self.master).grid(row=1,column=2, sticky=W, pady = 5, padx = 15)         self.estMaterialEntry = ttk.Entry(self.master).grid(row=1,column=3, sticky=W, pady = 5, padx = 15)          # row 3         self.addRowButton = ttk.Button(self.master, command=self.show, text="Add Row").grid(row=2, column = 2, sticky=W, pady = 5, padx = 15)         self.addRowButton = ttk.Button(self.master, command=self.show, text="Add Col").grid(row=2, column = 3, sticky=W, pady = 5, padx = 15)          #row 4         self.canvasFrame = Frame(master)           self.canvasFrame.grid(row=3, column=0, columnspan=3, sticky=W+E+N+S, pady=5, padx=15)         master.grid_rowconfigure(3,weight=1)         master.grid_columnconfigure(0,weight=1)         xscrollbar = Scrollbar(self.canvasFrame, orient=HORIZONTAL)         xscrollbar.grid(row=1, column=0, sticky=E+W)          yscrollbar = Scrollbar(self.canvasFrame)         yscrollbar.grid(row=0, column=1, sticky=N+S)          canvas = Canvas(self.canvasFrame, bd=0,                          scrollregion=(0, 0, 1000, 1000),                         xscrollcommand=xscrollbar.set,                         yscrollcommand=yscrollbar.set)         canvas.grid(row=0, column=0, sticky=N+S+E+W)         self.canvasFrame.grid_rowconfigure(0,weight=1)         self.canvasFrame.grid_columnconfigure(0,weight=1)     def show(self):         messagebox.showinfo("title", "message") def on_closing():     root.destroy() #     from tkinter import messagebox #     if messagebox.askokcancel("Quit", "Do you want to quit?"): #         root.destroy()   root = Tk()    mainui = MainUI(root) root.title("Test") root.protocol("WM_DELETE_WINDOW", on_closing) root.mainloop() 

Is it wrong to use flexboxgrid classes like “row”, “col-1-of-4” in the element with another class

Can I use the first way with classes instead of the second one when I use flexbox-grid and which one is the correct way of doing it, because in a second way “article” is not the flex item and I don’t know how to proceed?

//FIRST WAY <section class="section-features row">         <article class="feature-box col-1-of-2">             <h2 class="heading-secondary">Heading</h2>             <p class="feature-box__text">                 Lorem ipsum dolor sit amet, consectetur             </p>         </article>         <article class="feature-box">             <h2 class="heading-secondary">Heading</h2>             <p class="feature-box__text">                 Lorem ipsum dolor sit amet, consectetur             </p>         </article>     </section>  //SECOND WAY <section class="section-features">         <div class="row">             <div class="col-1-of-2">                 <article class="feature-box">                     <h2 class="heading-secondary">Heading</h2>                     <p class="feature-box__text">                         Lorem ipsum dolor sit amet, consectetur                     </p>                 </article>             </div>             <div class="col-1-of-2">                 <article class="feature-box">                     <h2 class="heading-secondary">Heading</h2>                     <p class="feature-box__text">                         Lorem ipsum dolor sit amet, consectetur                     </p>                 </article>             </div>         </div>     </section>