Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,547 members, 7,812,721 topics. Date: Monday, 29 April 2024 at 06:05 PM

How Can I Replicate This In Bootstrap? - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How Can I Replicate This In Bootstrap? (2074 Views)

Who Can Replicate A Website For Me? / CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. / Margin Vs Padding In Bootstrap (2) (3) (4)

(1) (Reply) (Go Down)

How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:43pm On Mar 17, 2020
Still learning here and I took some projects. I am trying to rebuild this website using bootstrap. I can't seem to recreate the second bar. The one with the yellow button.

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:48pm On Mar 17, 2020
This is what I could get.

Re: How Can I Replicate This In Bootstrap? by lewis512(m): 10:35pm On Mar 17, 2020
You can’t get more than that my dear brother , unless you learn more of CSS or a good frontend frame work like React or Angular then you can even do better than what you trying to replicate
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 11:05pm On Mar 17, 2020
lewis512:
You can’t get more than that my dear brother , unless you learn more of CSS or a good frontend frame work like React or Angular then you can even do better than what you trying to replicate
cry cry. Angular course is still way down below and this is meant to be my first portfolio item.
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 12:38am On Mar 18, 2020
bro for now forget boostrap and learn CSS3 very well

1 Like

Re: How Can I Replicate This In Bootstrap? by silento(m): 2:20am On Mar 18, 2020
Download w3.css and learn small css3 this is very easy stuff to do if u can dash me small something holla me i will do it for u
Re: How Can I Replicate This In Bootstrap? by Karleb(m): 7:10am On Mar 18, 2020
...
Re: How Can I Replicate This In Bootstrap? by Karleb(m): 7:12am On Mar 18, 2020
silento:
Download w3.css and learn small css3 this is very easy stuff to do if u can dash me small something holla me i will do it for u

w3.css, bootstrap and other css frameworks are thesame. They may look different, sound different but they still have same function.

He should stick to bootstrap.
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 7:30am On Mar 18, 2020
Anonime1105:
bro for now forget boostrap and learn CSS3 very well
I prefer using bootstrap to plain CSS.
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 7:30am On Mar 18, 2020
silento:
Download w3.css and learn small css3 this is very easy stuff to do if u can dash me small something holla me i will do it for u
I am not doing it for a company. I am doing it to learn
Re: How Can I Replicate This In Bootstrap? by Presh900(m): 1:07pm On Mar 18, 2020
tensazangetsu20:
I am not doing it for a company. I am doing it to learn
inspect the page source code na
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:15pm On Mar 18, 2020
Presh900:
inspect the page source code na
Done this. It looks like it was done with PHP. I haven't gotten to that module yet that's why I want to implement it with what I have learnt.
Re: How Can I Replicate This In Bootstrap? by Xandelle: 1:38pm On Mar 18, 2020
tensazangetsu20:

Done this. It looks like it was done with PHP. I haven't gotten to that module yet that's why I want to implement it with what I have learnt.

Php isn't a front end language, hence you can never know. It's also neither a stylesheet nor a markup language, hence it has zero effect on the look of your pages.

It's common to use a separate style sheet in addition to bootstrap in order to get the desired effect you want. Otherwise you'd see yourself heavily modifying bootstrap css (which is not advisable, because it will bring in constraints when you want to update).. That's if you're linking it locally... If you're linking from a cdn, there's no way to modify it

1 Like

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:44pm On Mar 18, 2020
Xandelle:


Php isn't a front end language, hence you can never know.

It's common to use a separate style sheet in addition to bootstrap in order to get the desired effect you want. Otherwise you'd see yourself heavily modifying bootstrap CDs (which is not advisable, because it will bring in constraints when you want to update).. That's if you're linking it locally... If you're linking from a cdn, there's no way to modify it

I figured out it was in PHP as I saw some symbols like fc grid etc. I googled those out and kept on seeing some PHP documentations. I never use internal CSS ever. Makes the code hard to read.
Re: How Can I Replicate This In Bootstrap? by Xandelle: 1:51pm On Mar 18, 2020
tensazangetsu20:


I figured out it was in PHP as I saw some symbols like fc grid etc. I googled those out and kept on seeing some PHP documentations. I never use internal CSS ever. Makes the code hard to read.

Well php will only output formatted html content to the browser. What you want to do can entirely be done with html and css. Don't just learn bootstrap but learn css too. Learn grid systems in css. Using % or em/rem instead of px. Then combining your style sheet with bootstrap.

Also find a good icon library (svg)... You can download and link it locally in your project, or you can link directly from the cdn. I suggest bootstrap icons.

Finally, even pros still do a lot of googling and a lot of trial and error. Keep trying on it. Nice work

1 Like

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 1:54pm On Mar 18, 2020
Xandelle:


Well php will only output formatted html content to the browser. What you want to do can entirely be done with html and css. Don't just learn bootstrap but learn css too. Learn grid systems in css. Using % or em/rem instead of px. Then combining your style sheet with bootstrap.

Finally, even pros still do a lot of googling and a lot of trial and error. Keep trying on it. Nice work
I did learn CSS but in the course I used when I got to bootstrap it was just so easy to implement. I have used it for some projects in the course but I am willing to try more wicked complex things.
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 4:48pm On Mar 18, 2020
tensazangetsu20:

I prefer using bootstrap to plain CSS.
because it is easier but you would not learn the fundamentals that way.
Boostrap is a Css framework, it is always better you really understand the language before moving to learn it's frameworks else you might not really understand it's essence thereby creating more problems for yourself on the long run.
This applies to all programming languages

1 Like

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 4:59pm On Mar 18, 2020
Anonime1105:

because it is easier but you would not learn the fundamentals that way.
Boostrap is a Css framework, it is always better you really understand the language before moving to learn it's frameworks else you might not really understand it's essence thereby creating more problems for yourself on the long run.
This applies to all programming languages
True though. I have also created some CSS only websites. I had to look through w3 schools and there are a ton of stuff I don't know with regards to CSS. Would go back to learn that.
Re: How Can I Replicate This In Bootstrap? by Anonime1105(m): 5:17pm On Mar 18, 2020
tensazangetsu20:

True though. I have also created some CSS only websites. I had to look through w3 schools and there are a ton of stuff I don't know with regards to CSS. Would go back to learn that.

That would be better
Re: How Can I Replicate This In Bootstrap? by soleexx(m): 10:06am On Mar 22, 2020
that looks more like a SPRY puglins,

First you still need to learn CSs and how to position your page, Focus more and learn more on frontEnd..

Nice work.. Just don't stop designing.. And ur creative will be unleashed
Re: How Can I Replicate This In Bootstrap? by Payper(m): 10:45am On Mar 22, 2020
tensazangetsu20:

What course are you using to learn, I'm learning too. I skipped Bootstrap for a reason, too many classes and they mess up my markup.
Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 10:49am On Mar 22, 2020
Payper:

What course are you using to learn, I'm learning too. I skipped Bootstrap for a reason, too many classes and they mess up my markup.
Angela yu course on web development. It's on udemy. It's not too detailed though as I have to get other courses to supplement.
Re: How Can I Replicate This In Bootstrap? by Payper(m): 12:08pm On Mar 22, 2020
tensazangetsu20:

Angela yu course on web development. It's on udemy. It's not too detailed though as I have to get other courses to supplement.

Since we are both learning do you mind if we exchange WhatsApp contacts to share experience as well as materials. I don't mind here's my WhatsApp details.
07067444368

Feel free to say hi.
Re: How Can I Replicate This In Bootstrap? by ZackOF: 5:16pm On Mar 22, 2020
tensazangetsu20:
Still learning here and I took some projects. I am trying to rebuild this website using bootstrap. I can't seem to recreate the second bar. The one with the yellow button.
You can use only css to do that. My suggestion is that, create a parent div to act as a container and then inside this parent div, create others divs to act as children for the parent div. Now set display: flex; on the parent container. This will position the child containers/divs side by side. Now set a border-right for each child. For the icons, you can use fontawesome icons while the input field for the date and time na just simple HTML form and inputs stuff, you should be able to do that. One more thing is that you should set the calendar icons as background and position it to the far left so that it will be visible and it will sit beside the date input. I don't know if you understand me but na simple stuff.

....

if you don't want to use div, you can use ul. Then let all the li be display as inline-block and inside each li, put your input tag there and from there you go.

1 Like 1 Share

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 5:22pm On Mar 22, 2020
ZackOF:
You can use only css to do that. My suggestion is that, create a parent div to act as a container and then inside this parent div, create others divs to act as children for the parent div. Now set display: flex; on the parent container. This will position the child containers/divs side by side. Now set a border-right for each child. For the icons, you can use fontawesome icons while the input field for the date and time na just simple HTML form and inputs stuff, you should be able to do that. One more thing is that you should set the calendar icons as background and position it to the far left so that it will be visible and it will sit beside the date input. I don't know if you understand me but na simple stuff.

....

if you don't want to use div, you can use ul. Then let all the li be display as inline-block and inside each li, put your input tag there and from there you go.
Thanks I have decided to learn more about CSS especially advanced CSS.
Re: How Can I Replicate This In Bootstrap? by HMMD: 7:22pm On Mar 23, 2020
Flexbox is will help you get that done—faster.

The Vanilla CSS3 way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

The Bootstrap way: https://getbootstrap.com/docs/4.4/utilities/flex/

1 Like

Re: How Can I Replicate This In Bootstrap? by tensazangetsu20(m): 8:45pm On Mar 23, 2020
HMMD:
Flexbox is will help you get that done—faster.

The Vanilla CSS3 way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

The Bootstrap way: https://getbootstrap.com/docs/4.4/utilities/flex/
Thanks men.

1 Like

Re: How Can I Replicate This In Bootstrap? by madjnr: 5:17am On Apr 07, 2020
tensazangetsu20:

cry cry. Angular course is still way down below and this is meant to be my first portfolio item.
Hello please are you on upwork?

(1) (Reply)

How Can I Monetize My Programming Skills / Why Are Females Not Interested In IT?( Esp In Nigeria) / Did You Compete In The Fed Min Of Communication Technology/intel Corp Contest?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 101
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.