I couldn't figure out how to make the bootstrap column like this:
col 3 | col 4.5 | col 4.5
The long answer is again no, because Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases. Rows must be placed within a . container (fixed-width) or . container-fluid (full-width) for proper alignment and padding.
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
In short, they are used to define at which screen size that class should apply: xs = extra small screens (mobile phones) sm = small screens (tablets) md = medium screens (some desktops) lg = large screens (remaining desktops)
You can try this :
Just split a col-9 in 2 parts.
Bootply : http://www.bootply.com/128927
HTML :
<div class="col-xs-3"> col-xs-3 </div> <div class="col-xs-9"> <div class="row"> <div class="col-xs-6">col-xs-4.5</div> <div class="col-xs-6">col-xs-4.5 </div> </div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With