Как создать такие элементы, как показано на рисунке?

Question

[student12345]

Здравствуйте! Дали такое задание: Оформить такие же элементы в bootstpap, как показано на рисунке. Помогите пожалуйста

где, "Пополнить" - ссылка, "Изменить" - кнопка

Answer 1

[sergey]

Мой вам совет: учите верстку html/css, это основы и если вы их не понимаете, то какой смысл вам подсказывать.
На изображении ссылка и кнопка, и в bootstrap это ссылка и кнопка:)

<a href="#">Пополнить</a>
<btn>Изменить</btn>

ну и стили им конечно же нужно задатьjsfiddle

Comments

[student12345]

SM: А я учу. Времени просто мало, скоро уже сдавать. Кнопку создала, ссылку тоже. Не подскажите как уменьшить таблицу(убрать пустые промежутки)? У меня таблица на всю страницу получается.

[sergey]

student12345: задайте ширину таблице и внутренним столбцам, к примеру: table: {width: 100%; max-width: 400px;}
td{width: xxx% или px}

[student12345]

Я делаю в bootstrap. У меня есть css файл, где я добавляю стили и html, где я пишу остальное. Когда я пишу в css table: {width: 100%; max-width: 400px;}
td{width: 100% } меняются все таблицы. Можно ли указать стиль только для одной таблицы?

[sergey]

student12345: td{width: 100% } - это как понимать? у вас в таблице несколько же столбцов, вся шырина таблицы 100%, то как один из столбцов 100%?

[sergey]

student12345: можно, присвойте класс таблице и стилизуйте только ее

[sergey]

student12345: https://jsfiddle.net/serge_sagan/Ledjz0w3/

[student12345]

SM: поняла,огромное спасибо. Хорошая ссылка

[student12345]

SM: Можете еще кое-что сказать?) я создала таблицу, ссылку, кнопку, но они все на отдельной строке. Возможно ли разместить их как на картинке?

[sergey]

student12345: для этого необходимо видеть весь код, что бы понимать что у вас к чему. Но навскидку: присвойте каждому из трех элементов float: left или display: inline-block

[student12345]

SM: Огрооомное вам спасибо. Вы мне очень помогли. Расположение изменить конечно не смогла, завтра еще посмотрю,на сегодня хватит)