How to make a Bootstrap page? - html

I must make a webpage using Bootstrap.
These are the requirements:
1 page in bootstrap. We have attached a handmade sketch. The page will have a list. In each list, there will be a title, 8 text fields in the group of 2 divided into 4 parts.
For example, FirstName: Oracle(2 fields), LastName: Maven (2 fields), and so on, an image slider, which can have minimum 1 and maximum 3 images in it. We can view the image on a big scale and zoom in zoom out the image. Below the slider will be Approve and Reject button which will be visible ONLY at the last Image. The right side of the section will contain 11 Input fields along with the labels. all are optional. Below the 11 fields will be a submit button. This will repeat like a list.
This is the sketch:
I don't understand how to do the lists.
I would be very grateful if you could help me.

If you didn't use Bootstrap and don't know how it's function better download some tool for making bootstrap sites or if you are familiar download a template.
Take a look on Pingendo, it's a drag and drop desktop application (you also have web) and just pick which element you want and drop it on the page...

Related

Jump to specific field when a multiple choice radio button is selected in Gravity Forms

is there an option or maybe a small custom code to make Gravity Forms radio buttons jump to a field on selection?
In my example, i have a list of 14 options. Using a condition logic when you select one option a custom HTML is revealed right under each and every option. For desktop is super ok, the screen is big and all fit well. The problem is for mobile devices because you select an option but after that, you have to scroll to see the custom HTML.
Is there any option or custom code snippet in Gravity Forms that jumps to that custom HTML when an option is selected?
I found some resources on how to make this using HTML code with ids but this is somehow dynamic though the HTML code is placed in the same position. My first idea was to add the same ID to each and every HTML code so that when a radio button is pressed it scrolls to that ID. Don't know if it makes sense but ...
Can someone help me with some resources or give me some hints? Many thanks.

I am trying to make something in my web page that, after pressing a button, randomizes three seperate images and then shows pieces of text related

I'm trying to make a website about a game, this game has items, characters and places and I'm trying to code something where, when a button is pushed, it will show a random item, place and character and then show text based on the image it shows, I am working with Html 4 and am a very novice coder

Displaying image content types as grids in drupal 7?

I am currently using the Views and Display Suite modules to create a page that works as an image gallery. You click on the menu button to take you to a page (the view) that has multiple links to nodes (individual galleries).
When you click these nodes, they take you into the separate page and show all images uploaded using the "event" content type that I made.
The event content type has one field (type: image) that uses a multiupload widget, allowing for multiple file uploads.
However, the images on the node are displayed within divs, so they all have their own rows basically. I would like to know if it was possible to put them all into grids, and if so; how? I tried using display suite, but I only have that one field to work with.
If you want to get a fully customized page and arrange the fields just like you want, use the theme suggestions.
For a node of type "event", as you said, it would be node--event.tpl.php. You can duplicate the code inside the base template node.tpl.php of your parent theme (or if you don't have one, of Bartik for example) to have a good starting material.
Just rearrange the div, the tags, the variables as your convenience, add some custom CSS to make your grid, and you should be done!
I hope it helps.

put images in split by pages

I have 100 images to put on my website in one div. I want to put 20 images and give page numbers in the down, so that if user clicks on '2' it takes to next 20 images. How is this possible. I have tried searching, but could not find any answer
Depends really how your page serves these images. If you have a static HTML page then your only option would be to use JavaScript/jQuery.
If info about your images is serves from a database behind your web application then you can use pagination and routing. For instance you could have an url http://mydomain.com/images and this would select the first 20 images from your database then bellow you gallery you can have a set of links Previous and Next and when you click on Next it takes you to the url http://mydomain.com/images/20 still the gallery page only /20 appended to it to use as an offset for your SQL Query.
Tho seems what you really need is just a simply jQuery image gallery something like this:
http://www.tn3gallery.com/?refCode=fe8775
http://galleria.io/
http://spaceforaname.com/galleryview/#
http://tympanus.net/codrops/2010/06/24/multimedia-gallery/

Add divs to post content with Advanced Custom Fields plug in? (wordpress)

I was wondering if it's possible, I tried making a custom field type a Text Area (under Basic) with Advance Custom Fields plugin, with the default value having which I assigned a css attribute of 200x200px with a background of green, this did not appear on the post when viewed from the front end however so I was wondering if it's actually possible and how to do it properly.