Menu
Can't figure out why the columns aren't being structured with this HTML:
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-4"> <a href="">About</a> </div> <div class="col-md-4"> <img src="image.png"> </div> <div class="col-md-4"> <a href="#myModal1" data-toggle="modal">SHARE</a> </div> </div> </div> </div> 
424
You're probably not including the CSS properly. Are you clicking the big "Download Bootstrap" button from getbootstrap.com/getting-started ? You can also use the CDN just below that to get started. Second, make sure the ONLY elements inside a .
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Basic Structure of a Bootstrap Grid So, to create the layout you want, create a container ( <div class="container"> ). Next, create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Try this:
<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class --> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <a href="#">About</a> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <img src="image.png" /> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <a href="#myModal1" data-toggle="modal">SHARE</a> </div> </div> </div> 
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <a href="">About</a> </div> <div class="col-md-4"> <img src="image.png"> </div> <div class="col-md-4"> <a href="#myModal1" data-toggle="modal">SHARE</a> </div> </div> </div> </div> </div> You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.
A simpler way would be
<div class="container"> <div class="row"> <div class="col-md-4"> <a href="">About</a> </div> <div class="col-md-4"> <img src="image.png"> </div> <div class="col-md-4"> <a href="#myModal1" data-toggle="modal">SHARE</a> </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
