I want to create this layout using Bootstrap. It should be responsive. I am unable to get things into place as I am using different rows for each image.
My code: https://jsfiddle.net/dxs2gdkg/
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-4 content-image">
<img src="http://placehold.it/200x200">
</div>
<div class="col-md-4">
<h3>State of Texas Approved</h3>
<h2>Online Drivers Ed</h2>
</div>
<div class="col-md-4 featured-image">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="row">
<div class=" col-md-12 main-list">
<ul>
<li>America's #1 Driving School - Most Selected Course Provider</li>
<li>Save a trip to the DPS! Official test included in the Course</li>
<li>100% Pass Rate - Guaranteed to Pass the Official Test</li>
<li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li>
</ul>
<div class="small-images">
<img src="http://placehold.it/200x100">
<img src="http://placehold.it/200x100">
</div>
</div>
</div>
You'd need one row to place all content, divide it into two columns. After left column should also be a row to be divided further into two columns.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/200x200" />
</div>
<div class="col-md-6">
<h3>State of Texas Approved</h3>
<h2>Online Drivers Ed</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul>
<li>America's #1 Driving School - Most Selected Course Provider</li>
<li>Save a trip to the DPS! Official test included in the Course</li>
<li>100% Pass Rate - Guaranteed to Pass the Official Test</li>
<li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li>
</ul>
<div class="small-images">
<img src="http://placehold.it/200x100">
<img src="http://placehold.it/200x100">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Related
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
I have the following code:
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
No matter what I do, the result is the second column appears directly below the other.
The Margin - 100% and it shouldn't be.
I used the following https://getbootstrap.com/docs/4.1/layout/grid/#equal-width for reference.
I've been doing web development for over 35 yrs and this, so very simple, is kicking me.
This code lives inside an article tag. It's not full width of the page but a piece of it.
"NOTE: Ignore the DJ equipment. That picture will be replaced"
Here's the section that holds the box:
<!-- Main -->
<div id="main" class="site-main container_12">
<!-- Left column -->
<div id="primary" class="grid_8">
<!-- About Us -->
<article class="single-post">
<header class="entry-header grad1">
<h1 id="equipTitle" class="entry-title">Welcome to our Magic Shop</h1>
<div class="clear"></div>
</header>
<div class="entry-content">
<br>
<!-- Magic Page 1 -->
<div id="magic1" class="entry-content-post equip-box-1">
<h3><strong>Card Magic Overview</strong></h3>
<p class="mainptext">Card manipulation is the branch of magic that deals with creating effects using sleight of hand techniques involving playing cards. Card manipulation is often used in magical performances, especially in close-up, parlor,
and street magic. This is how I learned.</p>
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
<p class="mainptextnext">Click NEXT to continue...</p>
<div class="grid_4 margin-bottom slider-arrow arrow-box-1">
<a class="prevslidee load-item" onclick="funcs.goLeft('magic1','magic0')">Prev</a>
<a class="nextslidee load-item" onclick="funcs.goRight('magic1','magic2')">Next</a>
</div>
....
Thoughts?
UPDATE: This is what I see in the DEV console
Then the console log:
I just copy and paste your html elements and its working fine I using Bootstrap Version 4.1.3 as CDN.
I think override style on columns so need to find which style is override from Inspect Element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
I want to create a asp.net website. I use a bootstrap template. I put the link of that here. https://shapebootstrap.net/demo/html/evento/index.html#event-carousel . I want to connect Event section to sqlserver and the pictures load from the database table. i test that with repeater and datalist control in asp.net but it does not work correctly and the style of template destroy.For example when I used the repeater the pictures load from database but all of them are in one column.
How can I do that? I create a new section like event section. but I want to connect it to sql server. I searched for it and understand that I should use 2 repeater like 2 for loop and use group by. For example the datatable that load from database has 12 rows. I should devide it for example into 4*3 and connect datatable to repeaters. I do not know how can I do it?
<section id="Prefer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="Prefer-carousel" class="carousel slide" data-interval="false">
<h2 class="heading" style="text-align:right;">Prefer</h2>
<a class="even-control-left" href="#Prefer-carousel" data-slide="prev" ><i class="fa fa-angle-left" ></i></a>
<a class="even-control-right" href="#Prefer-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event1.jpg" alt="event-image">
<h4>Chester Bennington</h4>
<h5>Vocal</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event2.jpg" alt="event-image">
<h4>Mike Shinoda</h4>
<h5>vocals, rhythm guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event3.jpg" alt="event-image">
<h4>Rob Bourdon</h4>
<h5>drums</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event1.jpg" alt="event-image">
<h4>Chester Bennington</h4>
<h5>Vocal</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event2.jpg" alt="event-image">
<h4>Mike Shinoda</h4>
<h5>vocals, rhythm guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event3.jpg" alt="event-image">
<h4>Rob Bourdon</h4>
<h5>drums</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar" />
</div>
</div>
</div>
</section><!--/#Prefer-->