Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Html Specify Divider Gap Measurement In Square Grid Picture

Post a Comment
I have a square grid, how do I specify the white space divider gap between First Column and Second Column? Right now they seem to far apart, I would like to be able to specify meas

Solution 1:

to do this you should override col-6 class and change the padding as you want.

It's recommended to add other class to adjust padding rather than editing col-6 class.

col-6 set by default in bootstrap to

padding-left: 15px;
padding-right: 15px;

I've added class nopadding with style: 

.col-6.nopadding{ 
   padding: 0;
}

If you want to remove the space between image and border, you would also remove the padding of img. Fortunately it has class img-thumbnail so you'd add: 

.nopadding.img-thumbnail { 
padding: 0;
}

See the final result: 

.col-6.nopadding{ 
padding: 0;
}

.nopadding.img-thumbnail { 
  padding: 0;
}
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><divclass="container"><divclass="row"><divclass="col-6 nopadding justify-content-center d-flex"><imgclass="img-thumbnail w-100"src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div><divclass="col-6 nopadding justify-content-center d-flex"><imgclass="img-thumbnail w-100"src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div><divclass="col-6 nopadding justify-content-center d-flex"><imgclass="img-thumbnail w-100"src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div><divclass="col-6 nopadding justify-content-center d-flex"><imgclass="img-thumbnail w-100"src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div></div></div></body></html>

Post a Comment for "Html Specify Divider Gap Measurement In Square Grid Picture"